AngularJS binding not occurring on page until a user action

Question

I've got my first angular app which displays some data from a list via ng-repeat.

The controller for the view sets a few variables to scope - some directly in the function and another from an API call.

The data from the in function load is showing up in that ng-repeat. The data from the service call doesn't show up (debugging shows the function is being called and data returned and set in scope).

I've got a filter on and if I type anything in it then the data shows up. Or when I click to another view the data flashes onto the page briefly before it loads the new view.

Here is some view code (the items works, venues does not):

<div ng-repeat="item in items">
{{ item.firstName }}
</div>
<div ng-repeat="venue in venues">
{{ venue.details }}
</div>

And here is the controller (data is coming back from the call):

$scope.items = [
{ "firstName": "John", "lastName": "Doe" },
{ "firstName": "Anna", "lastName": "Smith" },
{ "firstName": "Peter", "lastName": "Jones" }
];

var client = new WindowsAzure.MobileServiceClient("url", "key");

var query = client.getTable("venues").read().done(function (results) {
            $scope.venues = results;
        }, function (err) {
            alert("Error: " + err);
        });

I'm wondering if maybe the binding is happening before the data is returned from the API?

I added a div and this line into the function and it is printing the results to the page no issues:

document.getElementById("venueslist").innerHTML = JSON.stringify(results);

Thank you for reading.

can you elaborate?, where did the "client" object came from?, it is a service, resource or your own singleton? — Cesar Delgado
– Cesar Delgado, Commented Jun 11, 2015 at 1:49
if "client" is not an angular service/factory, maybe a $scope.$apply() after assign venues to the scope may work. — Cesar Delgado
– Cesar Delgado, Commented Jun 11, 2015 at 1:51

ShankarSangoli · Accepted Answer · 2015-06-11 02:15:30Z

2

Looking at your code client.getTable doesn't look like it is using any of angularJs $http or $timeout service. So you will have to wrap the assignment in scope.$apply() so that the $digest cycle is run and the bindings are updated in the view.

    var query = client.getTable("venues").read().done(function (results) {
        $scope.$apply(function () {
           $scope.venues = results;
        });
    }, function (err) {
        alert("Error: " + err);
    });

Side note: why are you doing JSON.parse(JSON.stringify(results)), you can directly use results if it is a json object.

edited Jun 11, 2015 at 2:15

answered Jun 11, 2015 at 1:57

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shaw Levin Over a year ago

That was exactly it. I will need to read up on why setting the value inside the function isn't triggering the binding.

ShankarSangoli Over a year ago

You can read this which is a very good article to understand how the binding works in angularjs jeffryhouser.com/index.cfm/2014/6/2/…

Shaw Levin Over a year ago

Thanks. I also removed the unnecessary parsing.

Collectives™ on Stack Overflow

AngularJS binding not occurring on page until a user action

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related