Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
  <meta charset="utf-8">
  <title>Local scopes</title>
</head>
<body ng-app="LimitedScopesApp">
  <h1>Local Angular Js scopes</h1>
  <div id="parent" ng-controller="ParentController">
    This is parent scope. n = {{ n }} Update n in parent scope using ng-model <input ng-model="n" />
    <button ng-click="n = 100;">Set n to 100</button> using ng-click
    <div id="child" ng-controller="ChildController">
      This is child controller. n = {{ n }} Update n in child scope: 
      <br/> <button local-click="n = 22;">Set n to 22</button> using local-click
    <br/> <button ng-click="n = 32;">Set n to 32</button> using ng-click
      </p>
    </div>
  </div>
</body>
</html>
 
#parent {
  padding: 5px;
  border: 1px solid red;
}
#child {
  margin: 5px;
  padding: 5px;
  border: 1px solid blue;
}
 
// noprotect
(function initPrimes(root) {
  function isPrime(n) {
    var k;
    // var limit = Math.sqrt(n);
    var limit = n;
    for (k = 2; k < limit; k += 1) {
      if (n % k === 0) {
        return false;
      }
    }
    return true;
  }
  // finds Nth prime
  function findPrime(n) {
    var foundPrimes = [];
    var k;
    if (foundPrimes.length) {
      k = foundPrimes[foundPrimes.length - 1] + 1;
    } else {
      k = 1;
    }
    while (foundPrimes.length < n) {
      if (isPrime(k)) {
        foundPrimes.push(k);
      }
      k += 1;
    }
    return foundPrimes[n - 1];
  }
  root.findPrime = findPrime;
}(this));
var delay = angular.bind(null, findPrime, 8000);
    angular.module('LimitedScopesApp', [])
      .run(function ($rootScope) {
        $rootScope.$localApply = function $limitedApply(expr) {
          console.log('running local apply in scope ' + this.$id);
          try {
            this.$$phase = '$apply';
            return this.$eval(expr);
          } catch (e) {
            $exceptionHandler(e);
          } finally {
            this.$$phase = null;
            try {
              // $rootScope.$digest();
              this.$digest();
            } catch (e) {
              $exceptionHandler(e);
              throw e;
            }
          }
        };
      })
      // look at ng-click and other event implementation
      // https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js
      .directive('localClick', ['$parse', '$rootScope', function($parse, $rootScope) {
        var directiveName = 'localClick';
        var eventName = 'click';
        return {
          restrict: 'A',
          compile: function($element, attr) {
            var fn = $parse(attr[directiveName]);
            return function limitedClickHandler(scope, element) {
              element.on(eventName, function(event) {
                var callback = function() {
                  fn(scope, {$event:event});
                };
                scope.$localApply(callback);
              });
            };
          }
        };
      }])
      .controller('ParentController', function ($scope, $timeout) {
        console.log('parent controller init', $scope.$id);
        $scope.n = 10;
        $scope.$watch(function () {
          console.time('parent controller');
          delay();
          console.timeEnd('parent controller');
          return $scope.n;
        }, function (newValue) {
          console.log('n in parent controller changed', newValue);
        });
      })
      .controller('ChildController', function ($scope) {
        console.log('child controller init', $scope.$id);
        $scope.n = -1;
      });
Output

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

Dismiss x
public
Bin info
bahmutovpro
0viewers