AngularJS - Watch for changes in a service.
I tend to break my applications up into 3 main groups:
- App Module (primary app controllers)
- App Directives
- App Services
I usually put much of my logic into services that can be used within the app controllers and directives, but only recently discovered that $watch can be used on more than just your app scope!
In a directive I was working on I make a ngResource request to get a file tree; the logic for this request is inside a service I've named Tree.
There are actions that should cause the tree to refresh, but since it was in a service I was having trouble getting that to work well.
Enter $watch
I like watch. Watching for changes can make it pretty seamless when you need to fire actions based on those changes without muddying your markup with ng-change and ng-click.
So here's a dumbed down version of my application:
var App = app.module('ExampleApp', []);
/**
* Dummy Service
*/
App.service('Tree', function(){
this.rebuild = false;
this.Build = function(cb){
// resource request to get tree hierarcy
cb(response);
};
return this;
});
App.directive('treeView', function(Tree){
return {
restrict: 'A',
link: function(scope, elem, attrs){
scope.data = []; // The directive template will loop this data
// Watch for changes in the service
scope.$watch(function(){
return Tree.rebuild;
}, function(newVal, oldVal){
if(newVal) Tree.Build(function(response){ scope.data = response; Tree.rebuild = false; });
}
};
});So instead of watching a key on the scope i'm watching a function that returns the service data.
Why is that cool?
Now, from ANYWHERE in my app (say a user controller, that really doesn't even come close to touching the directive) I can toggle Tree.rebuild and the directive will update.
App.controller('UserCtrl', function($scope, Tree){
if($scope.user.newFile) Tree.rebuild = true;
})That simple call will now update the directive, and I didn't even have to resort to $rootScope assignments!