Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I want to update an Angular scope with data returned by some jQuery ajax call. The reason why I want to call the Ajax from outside Angular is that a) I want the call to return as fast as possible, so it should start even before document.ready b) there are multiple calls that initialize a complex model for a multiple-page web app; the calls have dependencies among themselves, and I don't want to duplicate any logic in multiple Angular controllers.

This is some code from the controller. Note that the code is somewhat simplified to fit here.

$scope.character = {};
$scope.attributeArray = [];
$scope.skillArray = [];

The reasoning for this is that a character's attributes and skills come as objects, but I display them using ng-repeat, so I need them as arrays.

$scope.$watch('character',function(){
  $scope.attributeArray = getAttributeArray($scope.character);
  $scope.skillArray = getSkillArray($scope.character);
});

In theory, when $scope.character changes, this piece of code updates the two arrays. Now comes the hard part. I've tried updating $scope.character in two ways:

characterRequestNotifier.done(function() { // this is a jQuery deferred object
  $scope.$apply(function(){ // otherwise it's happening outside the Angular world
    $scope.character = CharacterRepository[characterId]; // initialized in the jquery ajax call's return function
  });
});

This sometimes causes $digest is already in progress error. The second version uses a service I've written:

repository.getCharacterById($routeParams.characterId, function(character){
  $scope.character = character;
});

, where

.factory('repository', function(){
  return {
    getCharacterById : function(characterId, successFunction){
      characterRequestNotifier.done(function(){
        successFunction( CharacterRepository[characterId] );
      });
    }
  };
});

This doesn't always trigger the $watch.

So finally, the question is: how can I accomplish this task (without random errors that I can't identify the source of)? Is there something fundamentally wrong with my approaches?

Edit:

Try this jsfiddle here: http://jsfiddle.net/cKPMy/3/ This is a simplified version of my code. Interestingly, it NEVER triggers the $watch when the deferred is resolved.

share|improve this question

1 Answer

up vote 1 down vote accepted

It is possible to check whether or not it is safe to call $apply by checking $scope.$$phase. If it returns something truthy--e.g. '$apply' or '$digest'--wrapping your code in the $apply call will result in that error message.

Personally I would go with your second approach, but use the $q service--AngularJS's promise implementation.

.factory('repository', function ($q) {
  return {
    getCharacterById : function (characterId) {
      var deferred = $q.defer();

      characterRequestNotifier.done(function () {
        deferred.resolve(CharacterRepository[characterId]);
      });

      return deferred.promise;
    }
  };
});

Since AngularJS has native support for this promise implementation it means you can change your code to:

$scope.character = repository.getCharacterById(characterId);

When the AJAX call is done, the promise is resolved and AngularJS will automatically take care of the bindings, trigger the $watch etc.

Edit after fiddle was added

Since the jQuery promise is used inside the service, Angular has no way of knowing when that promise is resolved. To fix it you need to wrap the resolve in an $apply call. Updated fiddle. This solves the fiddle, I hope it solves your real problem too.

share|improve this answer
I've applied your code, but a) it still doesn't always trigger the watch - I verified this using both console.log and debugging b) now the functions that create the arrays no longer work. Other parts of the page which use the character object's properties directly do work. – Endre Jan 26 at 17:23
Could you perhaps create a fiddle/plnkr demonstrating the problem, and I'll try to help you further. – Martin Jan 26 at 17:43
added fiddle as requested – Endre Jan 27 at 12:31
thank you, it works indeed – Endre Feb 3 at 17:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.