watch-dom

what?

efficiently watch for changes to a dom element (or its descendents).

why?

angular $watch observes property modifications on the $scope, since in angular the $scope is the source of truth. this is a good pattern for most use cases. however, there are situations where you want modules to be decoupled, and the dom is the fundamental source of truth.

how?

default config

watchDom.$watch(DOMElement, function (newValue, oldValue) {
	...
});

watch custom properties (like what?)

var props = {
	subtree: true,
	attributeFilter: ['foo', 'bar']
};

watchDom.$watch(DOMElement, function (newValue, oldValue) {
	...
}, props);

full example

<myDirective>
	<myOtherDirective>
	</myOtherDirective>
</myDirective>

angular
.module('myModule', ['watchDom'])
.directive('myDirective', function (watchDom) {

	return {
		link: function (scope, element) {

			var otherDirective = element.find('myOtherDirective');

			watchDom.$watch(otherDirective, function() {

				// do something

			});

		}
	};
	
});

browser compatibility

ie11+, firefox 28+, chrome 31+, safari 7+, opera 20+, ios 6+, android 4.4+

full list

alternative approaches

• model observers ($watch)
• pub/sub emitters ($emit, $broadcast)

read

• w3 spec
• mdn doc