0

I have the following code Angular JS:

appService.get({id : id}).then(function (response) {
   $scope.vm.events.push({title: 'New event', type: 'important', draggable: true,    resizable: true});
})

This code returns response from AJAX service and puts object to array $scope.vm.events.

So, in template I dont see this added element as: {{vm.events}}

There is also one function in the same controller:

$scope.add = function (){
   $scope.vm.events.push({title: 'New event', type: 'important', draggable: true, resizable: true});
}

When I call it I see new element in template: {{vm.events}}.

Why does not work code in the first case?

4
  • Are you absolutely sure that code is ever executed? Does the promise resolve? Commented Oct 8, 2015 at 14:15
  • appService.get is jquery ajax? Commented Oct 8, 2015 at 14:19
  • Yes, I get response with array Commented Oct 8, 2015 at 14:23
  • but is it with jquery or is it with $http/$resource ? If it's jquery you need to call $scope.$apply(). Commented Oct 8, 2015 at 14:59

2 Answers 2

1

This is because the callback function in your service is outside the angularjs digest cycle.

For tackling this, there are two ways:

Method 1:

The first way would be to use $scope.$apply just after your callback in the service has finished as follows:

appService.get({id : id}).then(function (response) {
   $scope.vm.events.push({title: 'New event', type: 'important', draggable: true,    resizable: true});
   $scope.$apply(); //this for updating your scope outside the digest cycle
})

Method 2:

Wrapping your service code inside a function inside the controller's scope as follows:

$scope.fn = function() {
    appService.get({id : id}).then(function (response) {
       $scope.vm.events.push({title: 'New event', type: 'important', draggable: true,    resizable: true});
    })
}

So, in this method, whenever you want to call the service just call this function. This is also the reason why your 'add' function updates the template because it is in the 'scope' of the controller and in the digest cycle.

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

2 Comments

I use the second method now, it does not work, also when I use $scope.$apply(); I get: Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.7/$rootScope/inprog?p0=%24digest at Error (native)
I am appauled that this answer was downvoted, upvoting
0

If you are not seeing it, it is because the promise is not being resolved.

Do try putting something in the rejection handling part of the promise (on a second function within the 'then()' block):

appService.get({id : id}).then(function (response) {
   $scope.vm.events.push({title: 'New event', type: 'important', draggable: true, resizable: true});
},
function(){
 $scope.vm.events.push({title: 'ERROR_EVENT', type: 'ERROR_CALLBACK', draggable: true, resizable: true});
});

Like others suggested, if this is outside of angular, please call for $scope.$apply() or $scope.$digest() to trigger a digest cycle so that your data can be updated.

By adding this second function you should be able to see if the promise was being resolved or not, and if the problem lies elsewhere.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.