Negotiable Paleobotanist Missions

npm

Join us for the upcoming webinar, "Enterprise JavaScript done right: the tools you love, the security you need."Sign up here »

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

install

npm i watch-dom

Downloadsweekly downloads

0

version

0.0.5

license

Apache2

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability