补充——理解$watch ，$apply 和 $digest --- 理解数据绑定过程

最新推荐文章于 2019-06-22 18:32:41 发布

like-Betty

最新推荐文章于 2019-06-22 18:32:41 发布

阅读量435

点赞数

分类专栏： AngularJS 文章标签： angular

本文链接：https://blog.csdn.net/u012309349/article/details/52038766

版权

AngularJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html> 
<html ng-app="app"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>无标题文档</title> 
        <script type="text/javascript" src="angular.min.js"></script> 
    </head> 
<body>
    <div ng-controller="MainCtrl">
        <input ng-model="name" /><br>
        <clickable foo="foo" bar="bar"></clickable> 
    </div>
    <script>
        app = angular.module('app', []);
        app.controller('MainCtrl', function($scope) {
          $scope.name = "aaa";
          $scope.foo = 0;
          $scope.bar = 0;
        });
        app.directive('clickable', function() {
            return {
              restrict: "E",
              scope: {
                foo: '=',
                bar: '='
              },
              template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>',
              link: function(scope, element, attrs) {
                element.bind('click', function() {
                  scope.foo++;
                  scope.bar++;
                });
              }
            }

        });
  </script>
</body>
</html>

点击自定义指令对应的ul列表时，数据模型foo、bar的值会自增，但视图上不会有更新，因为没有手动的调用 $apply() 以触发$digest 循环（$digest 循环会处理$watch队列）。
而如果此时改变输入框的值，输入框改变对应的事件发生，该事件对应的函数会被包裹在一个函数中，传给$scope.$apply()作为参数，其中触发$digest循环，处理所有$watch队列。
此处有一个疑问就是，这里所指的所有$watch指的是一个controller中还是一个angualr应用中的即ng-app的范围内，下面实践了一下：

<!DOCTYPE html> 
<html ng-app="app"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>无标题文档</title> 
        <script type="text/javascript" src="angular.min.js"></script> 
    </head> 
<body>
    <div ng-controller="MainCtrl">
        <input ng-model="name" />   
    </div>
    <div ng-controller="subCtrl">
        <clickable foo="foo" bar="bar"></clickable>
    </div>
    <script>
        app = angular.module('app', []);
        app.controller('MainCtrl', function($scope) {
          $scope.name = "aaa";
        });
        app.directive('clickable', function() {
            return {
              restrict: "E",
              scope: {
                foo: '=',
                bar: '='
              },
              template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>',
              link: function(scope, element, attrs) {
                element.bind('click', function() {
                  scope.foo++;
                  scope.bar++;
                });
              }
            }

        });
        app.controller('subCtrl', function($scope) {
          $scope.foo = 0;
          $scope.bar = 0;
        });
  </script>
</body>
</html>