AngularJs assign http response object to scope from html

Question

This is the first time I use AngularJs and I would really appreciate some help on this.

I have a json file from which I am retrieving some content that gets displayed on my html template. So far so good.

I need to assign an http response data to the scope from the html.

This is my app

var myApp = angular.module('myApp', ['ngMessages']);

myApp.controller('mainController', ['$scope', '$filter', '$http', '$log', function($scope, $filter, $http, $log) {

$scope.url = "myurl";

$http.get($scope.url)
    .success(function(result) {

        $scope.page = result;

    })
    .error(function(data, status) {

        $log.info(data);

    });

$scope.$watch('productId', function () {
    $log.info($scope.productId);
});

}]);

And this is the html

<div class="page" ng-controller="mainController">

    <div id="content" class="chapter">

        <h1>The Icons Update</h1>

        <div ng-init="productId = page[0].acf.spotlight_on"></div>

        <p>{{ page[0].acf.spotlight_on_title }}</p>
        <p>{{ page[0].acf.spotlight_on_paragraph }}</p>
        <img src="{{ page[0].acf.stylist_picture }}" />

    </div>
</div>

I need to assign to productId the value of page[0].acf.spotlight_on but need to do it from the html. I just get an undefined value.

Am I right to use ng-init on a div or should I use a different approach? Is there a different way to achieve what I need?

score 2 · Accepted Answer · answered Nov 14 '15 at 20:41

My understanding is that ng-init cannot be used to set scope values after a promise is resolved, which is what is happening when the value is set from $http.get. See angular docs for ngInit https://docs.angularjs.org/api/ng/directive/ngInit

In your question you say you need to set the value of productId in the html, however this appears impossible where it is returned by a promise.

The alternative is very simple to do in the controller by simply using the following:

var myApp = angular.module('myApp', ['ngMessages']);

myApp.controller('mainController', 
    ['$scope', '$filter', '$http', '$log', 
    function($scope, $filter, $http, $log) {

    $scope.page = {};
    $scope.productId = '';

    $scope.url = "myurl";
    $http.get($scope.url)
        .success(function(result) {
            $scope.page = result;
            // set the value of productId from the result
            $scope.productId = result[0].acf.spotlight_on;
        })
        .error(function(data, status) {
            $log.info(data);
        });
}]);

Thank you Tristan, I knew I could do that but I was looking for a solution from the html template. I understand that it is not possible so I will do it like you suggested. Thanks again :) — Jeff, Nov 15 '15 at 10:31

score 1 · Answer 2 · answered Nov 14 '15 at 17:54

1

If you use ng-init, then it creates a scope variable which is only limited to the element(and its children) where you have defined it. In other words, it won't be available in your controller which is why you get 'undefined'.

To tackle this, you can use $parent, which will create the scope variable in your controller:

ng-init="$parent.productId = page[0].acf.spotlight_on"

answered Nov 14 '15 at 17:54

Tarun Dugar

8,921
8
42
79

Thank you so much for taking time to reply. I have just added `$parent` but `$scope.$watch('productId', function () { $log.info($scope.productId); });` still gives me `undefined` in the console. Am I doing anything wrong? – Jeff Nov 14 '15 at 18:00
Change your watch to $scope.$watch('productId', function(new_val, old_val) { console.log(new_val) }). See if the value updates? – Tarun Dugar Nov 14 '15 at 18:01
It's still undefined. I have double checked that page[0].acf.spotlight_on is not empty or not valid. If I do {{page[0].acf.spotlight_on}} in the html the value shows up. This is very frustrating. Thank you for your help, please let me know if you have any other idea – Jeff Nov 14 '15 at 18:09
Even using `$parent` I can't see a reason why a digest loop would be triggered to update the value after the `$http.get` returns since there is no `ng-model`. Ie `productId` is set to `'undefined on'` init since the `$http.get` has not returned, but is not updated by a digest loop. – Tristan Nov 14 '15 at 19:13
Thank you for your input @Tristan. What do you suggest I should do? – Jeff Nov 14 '15 at 20:06

AngularJs assign http response object to scope from html

2 Answers2