CODEWITHSUNDEEP
javascripthtmlangularjs
Alon
Alon

Reputation: 7758

How to update view in angularJS when an object is updated outside of the scope

I have an object outside the AngularJS scope that looks something like:

obj = { isBig : true, name: "John" ... }

it has many parameters and it was created outside the angular scope and it updates outside of angularJS (for example - via ajax call that I make with jQuery).

inside my controller I write:

$scope.obj = obj;

How do I create an event that listens to any of the object's changes and updates the view ? So the event is the objects's changes

Specifically I have a parameter called obj.isAjaxCallFailed = true/false that I use in the view as <div ng-show="obj.isAjaxCallFailed"></div>

It's not working. I tried using $on and I can't figure out any way to do it.

Upvotes: 1

Views: 2936

Answers (1)

asgoth
asgoth

Reputation: 35829

Use $watch() on obj to listen for changes (in your controller):

$scope.$watch(function() {
   return obj;
}, function(value) {
   if(value) {
      $scope.obj = obj;
   }
}, true);

At the place in your code where you create or update obj, you use $rootScope.$apply() to kickoff the watches:

function someCallbackOutsideAngular(data) {
   var $rootScope = angular.injector(['ng']).get('$rootScope');
   $rootScope.$apply(function() {
      obj.someKey = data.someValue;
   });
}

Note: angular.injector(['ng']) should probably set somewhere outside the callback (no need to execute it all the time).

Upvotes: 1

Related Questions