Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  
  <div ng-controller="ctrl">
    
    <button ng-click="add()">add</button>
​
    <h2>manual($broadcast)</h2>
    <div ng-repeat="d in :refresh:data">
      {{::d}}
    </div>
    
    <br>
    
    <h2>single $watch</h2>
    <div bind-notifier="{ auto: autoExpr }">
      <div ng-repeat="d in :auto:data2">
        {{::d}}
      </div>
    </div>
​
  </div>
​
  
  
  
  
  
  
  
  
   <script>
(function () {
​
  /** 
   * angular-bind-notifier
   * src: github.com/kasperlewau/angular-bind-notifier/
   */ 
​
  'use strict';
​
  function dynamicWatcher (expr, notifiers) {
    function wrap (watchDelegate, scope, listener, objectEquality, parsedExpression) {
      var delegateCall = watchDelegate.bind(this, scope, listener, objectEquality, parsedExpression);
​
      notifiers.forEach(function (n) {
        scope.$on('$$rebind::' + n, delegateCall);
      });
​
      delegateCall();
    }
​
    return wrap.bind(this, expr.$$watchDelegate);
  }
​
  $parseDecorator.$inject = ['$delegate', 'bindNotifierRegex'];
  function $parseDecorator ($delegate, bindNotifierRegex) {
    function wrap (parse, exp, interceptor) {
      var match, expression, rawExpression, notifiers;
​
      if (typeof exp === 'string' && bindNotifierRegex.test(exp)) {
        match         = exp.split(':').filter(function (v) { return !!v; });
        notifiers     = match.slice(0, -1);
        rawExpression = match[match.length - 1];
​
        expression = parse.call(this, '::' + rawExpression, interceptor);
        expression.$$watchDelegate = dynamicWatcher(expression, notifiers);
​
        return expression;
      } else {
        var args = [exp, interceptor];
        if (!interceptor) { args.pop(); }
        return parse.apply(this, args);
      }
    }
​
    return wrap.bind(null, $delegate);
  }
​
  function bindNotifierDirective () {
    return {
      restrict: 'A',
      scope: true,
      compile: function (element, attributes) {
        var rx         = /[\{\}\s]/g;
        var keyValues  = attributes.bindNotifier.replace(rx, '').split(',');
​
        return function link (scope) {
          function handler (key, newVal, oldVal) {
            if (newVal !== oldVal) {
              scope.$broadcast(('$$rebind::' + key), newVal, oldVal, scope);
            }
          }
​
          keyValues.forEach(function (obj) {
            var split = obj.split(':');
            var key   = split[0];
            var val   = split[1];
​
            scope.$watch(val, handler.bind(null, key), typeof scope[val] === 'object');
          });
        };
      }
    };
  }
​
  angular
    .module('angular.bind.notifier', [])
    .constant('bindNotifierRegex', /^:([a-zA-Z0-9][\w-]*):(.+)$/)
    .directive('bindNotifier', bindNotifierDirective)
    .config(function ($provide) {
      $provide.decorator('$parse', $parseDecorator);
    });
​
}());
     
   </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers