I am trying to watch the width of a directive's element (the directive itself). In the demo below I set the element style to 100%, in the real world app the element resizes through media queries.
Here is my approach: http://jsfiddle.net/fusio/5zgaj79b/
scope.$watch(
function() {
return element.width()
},
function(val) {
console.log(val)
},
true
);
Is .width() not changing?
The reason it is not triggering is that, for the first function to get called, a digest cycle has to be triggered. How to do it? Try adding the following to your fiddle:
angular.module('HelloApp', ['components']).run(function($rootScope) {
$(window).on("resize", function() {
$rootScope.$apply();
});
});
For a real scenario, you may want to limit the scope of the $apply to a specific scope, so as not to cause unnecessary watcher invocations.
.on events?
run() function remains untouched. (3) The code in the second fiddle just prints something to the console. If you wanted to interact with Angular, you would need to trigger the digest calling $apply().window.on only once, in the application .run, right? (otherwise I would have multiple unnecessary observers on window) If this is the case, then how can I use the directive scope instead of rootScope? Thank you :)$rootScope. Or refactor the logic to use events, if performance really suffers.