AjRev AjRev - 4 months ago 20
AngularJS Question

Angularjs $scope is not updated

I am developing an angular-ionic-firebase application. I am struggling on an issue where I am unable to update a $scope in my html. My must resolve {{uevent}} and update the html with the result of {{uevent}}. My html code is below.

**<ion-view view-title="{{uevent}}">**
<ion-tabs class="tabs-stable tabs-icon-top">
<ion-tab title="Buddies" icon="ion-ios-people" ng- click="showBuddies(a)">
</ion-tab>
<ion-tab title="Summary" icon="ion-navicon" ng-click="billSummary()">
</ion-tab>
</ion-tabs>


my angular code is below. CurrUser is a factory. I've defined an empty $scope.uevent which I am expecting to update using a value returned from a factory.

var eventid = CurrUser.getEventid();
$scope.uevent = " ";

function updateEvent(desc) {
$scope.uevent = desc;
console.log($scope.uevent);// I am able to see the value returned from the factory. This function is executed below in the for loop.
};

// promise that returns a value from the factory - CurrUser.
CurrUser.getEventdesc(eventid).then(function (result) {
var description = result;
var desc;
for (var itemID in description) {
var tmp = description[itemID];
desc = tmp.Description; // This contains the value that must be updated to $scope.uevent
updateEvent(desc); // Calls the function defined above to update $scope.uevent.
};
});


I've been on this since last night without any clues. Any help is greatly appreciated and as always, thanks for your time.

UPDATE #1:(07 July)
When i added a timeout of 1 sec, the view was updated to the correct value.

function updateEvent(desc) {
$timeout(function(){
$scope.$apply(function () {
$scope.uevent = desc;
})
},1000);
};


Regards,

Answer

There are 2 execution context when You work with AngularJS - Angular Context and JavaScript Context.
When you are changing the data in AngularJS Context, the digest loop begins and all data updates, but when you change data in the JavaScript Context (e.g setTimeout, setInterval and so on), Angular doesn't know about the changes so it doesn't update the data. In JavaScript Context you must change your data in scope.$apply() method to run the digest loop manually. So your code will look like

        var eventid = CurrUser.getEventid();
        $scope.uevent = " ";

        function updateEvent(desc) {
        $scope.$apply(function(){
           $scope.uevent = desc;
        });

        console.log($scope.uevent);// I am able to see the value returned from the factory. This function is executed below in the for loop.
        };

        // promise that returns a value from the factory - CurrUser.
        CurrUser.getEventdesc(eventid).then(function (result) {
        var description = result;
        var desc;
        for (var itemID in description) {
        var tmp = description[itemID];
        scope.$apply(function(){
    desc = tmp.Description; // This contains the value that must be updated to $scope.uevent
       })

        updateEvent(desc); // Calls the function defined above to update $scope.uevent.
        };
        });

For more.If there is an Angular JS alternative, you must use it,because it runs te digest loop automatically($timeout instead of setTimeout(), $interval instead of setInterval())

Comments