AngularJS watch DOM change

by

So here’s what I ended up doing:

I discovered you could pass a function to $scope.$watch. From there, it’s pretty straightforward to return the value of the expression you want to watch for changes. It will work exactly like passing a key string for a property on the scope.

link: function ($scope, $el, $attrs) {
  $scope.$watch(
    function () { return $el[0].childNodes.length; },
    function (newValue, oldValue) {
      if (newValue !== oldValue) {
        // code goes here
      }
    }
  );
}

I am watching childNodes, not children, because the childNodes list holds elements as well as text nodes and comments. This is priceless because Angular uses comment placeholders for directives like ng-repeat, ng-if, ng-switch and ng-include which perform transclusion and alter the DOM, while children only holds elements.

More Related Contents:

  1. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  2. When to favor ng-if vs. ng-show/ng-hide?
  3. How to access parent scope from within a custom directive *with own scope* in AngularJS?
  4. How can I dynamically add a directive in AngularJS?
  5. How to use the ‘replace’ feature for custom AngularJS directives?
  6. What is the best way to conditionally apply attributes in AngularJS?
  7. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  8. Unit Testing AngularJS directive with templateUrl
  9. How to select an element by classname using jqLite?
  10. AngularJS ng-style with a conditional expression
  11. Confused about Angularjs transcluded and isolate scopes & bindings
  12. Angular: calling controller function inside a directive link function using &
  13. Angular directive how to add an attribute to the element?
  14. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  15. get original element from ng-click
  16. How can I test events in angular?
  17. angular directive encapsulating a delay for ng-change
  18. angularjs share data config between controllers
  19. How do I apply an AngularJS directive based on a class set by ng-class?
  20. $apply vs $digest in directive testing
  21. When to use the AngularJS `$onInit` Life-Cycle Hook
  22. AngularJS – how to override directive ngClick
  23. Bind class toggle to window scroll event
  24. Angular adds strange options into select element when setting model value
  25. Angular directive name: only lower case letters allowed?
  26. Angular directive for a fallback image
  27. What is ng-transclude?
  28. How to detect browser using angularjs?
  29. AngularJS. Convert tag value (Unix time to human-readable time)
  30. When to use double braces {{}} in angularJS

Leave a Comment