Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 24, 2015 02:36
Show Gist options
  • Save anonymous/48b2efce1efb88c4b651 to your computer and use it in GitHub Desktop.
Save anonymous/48b2efce1efb88c4b651 to your computer and use it in GitHub Desktop.
Download ZIP
$scope.$apply example // source http://jsbin.com/beniha/1
Raw
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<meta name="description" content="$scope.$apply example" />
</script>
<title></title>
</head>
<body>
<div ng-controller="One">
<button class="apply1">Apply my scope!</button>
a is {{obj.a}}
</div>
<div ng-controller="Two">
<button class="apply2">Apply my scope!</button>
<button class="digest2">Digest my scope!</button>
</div>
<script id="jsbin-javascript">
var obj={a:1};
setInterval(function(){
console.log(obj.a++);
}, 1000);
var scope1, scope2;
$('.apply1').click(function(){
console.log("Applier1 clicked!");
scope1.$apply();
});
$('.digest1').click(function(){
console.log("Digester1 clicked!");
});
$('.apply2').click(function(){
console.log("Applier2 clicked!");
scope2.$apply();
});
$('.digest2').click(function(){
console.log("Digester2 clicked!");
scope2.$digest();
});
angular.module('app', [])
.controller('One', function($scope){
scope1 = $scope;
$scope.obj = obj;
$scope.applier = function(){
$scope.$apply();
};
})
.controller('Two', function($scope){
scope2 = $scope;
$scope.applier = function(){
$scope.$apply();
};
})
;
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"><\/script>
<meta charset=utf-8 />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"><\/script>
<meta name="description" content="$scope.$apply example" />
<\/script>
<title></title>
</head>
<body>
<div ng-controller="One">
<button class="apply1">Apply my scope!</button>
a is {{obj.a}}
</div>
<div ng-controller="Two">
<button class="apply2">Apply my scope!</button>
<button class="digest2">Digest my scope!</button>
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var obj={a:1};
setInterval(function(){
console.log(obj.a++);
}, 1000);
var scope1, scope2;
$('.apply1').click(function(){
console.log("Applier1 clicked!");
scope1.$apply();
});
$('.digest1').click(function(){
console.log("Digester1 clicked!");
});
$('.apply2').click(function(){
console.log("Applier2 clicked!");
scope2.$apply();
});
$('.digest2').click(function(){
console.log("Digester2 clicked!");
scope2.$digest();
});
angular.module('app', [])
.controller('One', function($scope){
scope1 = $scope;
$scope.obj = obj;
$scope.applier = function(){
$scope.$apply();
};
})
.controller('Two', function($scope){
scope2 = $scope;
$scope.applier = function(){
$scope.$apply();
};
})
;</script></body>
</html>
Raw
jsbin.beniha.js
var obj={a:1};
setInterval(function(){
console.log(obj.a++);
}, 1000);
var scope1, scope2;
$('.apply1').click(function(){
console.log("Applier1 clicked!");
scope1.$apply();
});
$('.digest1').click(function(){
console.log("Digester1 clicked!");
});
$('.apply2').click(function(){
console.log("Applier2 clicked!");
scope2.$apply();
});
$('.digest2').click(function(){
console.log("Digester2 clicked!");
scope2.$digest();
});
angular.module('app', [])
.controller('One', function($scope){
scope1 = $scope;
$scope.obj = obj;
$scope.applier = function(){
$scope.$apply();
};
})
.controller('Two', function($scope){
scope2 = $scope;
$scope.applier = function(){
$scope.$apply();
};
})
;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment