[AngularJS] $.apply() vs. $.digest()

digest only work on the current scope, has no affect on the parent scope!

apply works for all the parents scope and current scope!

So, if you click digest button, only the brown color will change color.

If you click the apply button, all the borders will change color.

In summary, only if when $.apply() method will invoke some filter which does heavy stuff or will only want current scope get effected, then you might want to use digest. Otherwise, keep away from digest, it should be fine to use apply.

angular.module("demo", [])
    .filter("heavy", function () {
        return function (val) {
            return val + "      heavy!!! " + moment().format('SSS');
        }
    })


    .controller("OuterCtrl", function ($scope, $element) {
        var outer = this;

        $scope.$watch(function () {
            TweenMax.to($element, .5, {borderColor: tinycolor.fromRatio({
                r: Math.random(),
                g: Math.random(),
                b: Math.random()
            }).toHexString()})

        })
    })
    .controller("MiddleCtrl", function ($scope, $element) {
        var middle = this;

        $scope.$watch(function () {
            TweenMax.to($element, .5, {borderColor: tinycolor.fromRatio({
                r: Math.random(),
                g: Math.random(),
                b: Math.random()
            }).toHexString()})

        })
    })
    .controller("InnerCtrl", function ($scope, $element) {
        var inner = this;

        $scope.$watch(function () {
            TweenMax.to($element, .5, {borderColor: tinycolor.fromRatio({
                r: Math.random(),
                g: Math.random(),
                b: Math.random()
            }).toHexString()})

        })
    })

    .directive("digestButton", function ($rootScope) {
        return {
            restrict: "E",
            template: "<button class='btn'>$digest {{digestCount}}</button>",
            link: function (scope, element, attrs, ctrl) {
                scope.digestCount = 0;
                element.on("click", function () {
                    $rootScope.time = moment().format('h:mm:ss');
                    scope.digestCount++;
                    scope.$digest();
                })
            }
        }
    })

    .directive("applyButton", function ($rootScope) {
        return {
            restrict: "E",
            template: "<button class='btn'>$apply {{applyCount}}</button>",
            link: function (scope, element, attrs, ctrl) {
                scope.applyCount = 0;
                element.on("click", function () {
                    $rootScope.time = moment().format('h:mm:ss');
                    scope.applyCount++;
                    scope.$apply();
                })
            }
        }
    })
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css"/>

  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/tinycolor/0.11.1/tinycolor.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.js"></script>
  <script src="app.js"></script>

  <style>
    .well{
      border: 30px solid black;
    }
  </style>
</head>
<body ng-app="demo" class="container">

<div class="well" ng-controller="OuterCtrl as outer">
<h2>Outer {{ time | heavy}}</h2>

  <div class="well" ng-controller="MiddleCtrl as middle">
  <h2>Middle {{ time }}</h2>


    <div class="well" ng-controller="InnerCtrl as inner">
    <h2>Inner {{ time }}</h2>

      <digest-button></digest-button>
      <apply-button></apply-button>

    </div>

  </div>

</div>


</body>
</html>

 

Read More: https://egghead.io/lessons/angularjs-apply-vs-digest

posted @ 2014-09-06 22:13  Zhentiw  阅读(226)  评论(0)    收藏  举报