What
is $apply() in angular?
The angular $apply is a scope method.
It is also called scope object.
The $apply() method are evaluate watches
function and run $rootScope.$digest() to update the model properties forcefully
for $rootScope and its all child's.
$apply()
vs. $digest()
1. The
$apply() and $digest() methods are used to update the model properties
forcefully.
2. But
only difference $digest() method evaluate watchers for current $scope and apply
is use to evaluate watchers for $rootScope that means It's for all child's
scopes.
3. The
$apply() method is use to update $rootScope and bind model properties forcefully.
4. The
$apply() method is more slow then $digest() method because $digest() watchers
on current scope but $apply()watchers on $rootScope.
Syntax:-$scope.$apply(function () { //TODO your custom logic. });
//AngularJs code sample var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function ($scope) { //set default datetime. $scope.currentDateTime = new Date(); //update datetime. $scope.getUpdatedDateTime = function () { $scope.currentDateTime = new Date(); } //Added an event listener and apply the rootScope. var event = document.getElementById("btnAppyToDigest"); event.addEventListener('click', function () { //The $apply method is use to update date time on rootScope forcefully. $scope.$apply(function () { //get dateTime $scope.currentDateTime = new Date(); }); }]);
//Full live (AngularJs + HTML)demo example <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJs $apply method</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function ($scope) { //set default datetime. $scope.currentDateTime = new Date(); //update datetime. $scope.getUpdatedDateTime = function () { $scope.currentDateTime = new Date(); } //Added an event listener and apply the rootScope level. var event = document.getElementById("btnAppyToDigest"); event.addEventListener('click', function () { //The $apply method is use to update date time on rootScope forcefully. $scope.$apply(function () { //get dateTime $scope.currentDateTime = new Date(); }); }); }]); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <h2>AngularJs $apply method</h2> <div> <div> <button ng-click="getUpdatedDateTime()">Click to Update DateTime</button> <button id="btnAppyToDigest">Click to Update DateTime forcefully.</button> </div> <div>Result : {{currentDateTime | date:'MM-dd-yyyy HH:mm:ss'}}</div> </div> </body> </html>The Live output,
About Blogger
|
Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
|
0 comments:
Post a Comment