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

    Last publish

    Collaborators

    • avatar