$apply in AngularJs

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...
http://www.code-sample.com
http://www.code-sample.xyz