watch-dom

0.0.5 • Public • Published

watch-dom Build Status Coverage Status npm

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

read

Dependencies (0)

    Dev Dependencies (7)

    Package Sidebar

    Install

    npm i watch-dom

    Weekly Downloads

    1

    Version

    0.0.5

    License

    Apache2

    Last publish

    Collaborators

    • bcherny