如何将对象包装在angularjs服务中（并观察该对象的更改）？

Question

I'm wondering how I would go about watching a Javascript object for changes if that object isn't "a part of angular". So for instance I have a module, lets call it watchModule, that is directly accessible in the window. What i'm doing right now (and i'm sure is wrong, which is why I'm asking for help!) is something like this

angular.module('test', [])
.factory('WatchModule', function(){
    return watchModule;
})

I run in to a problems:

This object (watchModule) is instantiated on DOM ready. So, when angularJS first establishes this service, it returns undefined. Perhaps as a direct result of this, angularJS does not continue to update after the object becomes defined.

It's my hope that watching objects like this is possible. The project I'm working on is a WebGL app, and it doesn't make too much sense for certain things to be "members" of angular. I'd simply rather watch them to retrieve some values.

Answer 1

Angular can watch for objects that are attached to scope on either the root or some controller. It can also watch on a function, by invoking it on digest cycles.

What it means in your case is that if you want to watch over watchModule you have to attach it to a scope or create a function that wraps it.

$scope.watched=WatchModule;
   $scope.$watch('watched',function(newValue,oldValue) {
});

If this is not working then the case may be the reference that angular is watching is not the one that you are using. If you want to watch over sub properties of WatchModule, pass in an extra parameter to watch as true for object equality.