<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |