angular脏检查机制，及指令中修改$scope致父级作用域无法接收到问题-唐霜

angular的指令很像我们所说的组件，【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。不过比较好玩的是，angular里面存在【未经授权禁止转载】未经授权，禁止复制转载。作用域继承。不过这篇文章不讲这个问题，关【本文受版权保护】【关注微信公众号：wwwtangshuangnet】于angular作用域继承，可以阅读这篇【版权所有，侵权必究】文章。本文要讲的是另外一个话题，即指令中【本文受版权保护】【转载请注明来源】修改$scope的某个属性时，父级作用域【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】没有接收到这个修改。

【未经授权禁止转载】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【作者：唐霜】

问题还原转载请注明出处：www.tangshuang.net

【本文受版权保护】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】【原创内容，转载请注明出处】

在开发中，我使用了如下的一套方法：【未经授权禁止转载】

// controllerA
module.exports = ['$scope', function($scope) {
  $scope.members = []
  $scope.$watch('members', newValue => console.log(newValue))
}]

// template
<ul>
  <li ng-repeat="m in members">{{m.name}}</li>
</ul>
<button members="members">xxx</botton>

// directiveB
module.exports = [function() {
  return {
    restrict: 'A',
    scope: {
      members: '='
    },
    link($scope, $element, $attrs) {
      $element.on('click', () => { $scope.members = $scope.members.filter(item => item.age > 12) })
      $scope.$on('$destroy', () => { $element.off('click') })
    }
  }
}]

我希望通过点击自己创建的directiv【作者：唐霜】未经授权，禁止复制转载。e，可以对memebrs进行过滤。然而，原创内容，盗版必究。原创内容，盗版必究。当我在视图中点击时，什么事情都没有发生。

转载请注明出处：www.tangshuang.net【未经授权禁止转载】原创内容，盗版必究。【转载请注明来源】

angular的作用域【版权所有，侵权必究】

【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【原创不易，请尊重版权】

简单理解angular的作用域，即脚本$【作者：唐霜】【本文首发于唐霜的博客】scope的属性（或方法）可以在一个HT【转载请注明来源】转载请注明出处：www.tangshuang.netML结构范围内直接调用，调用方式有绑定（【未经授权禁止转载】【版权所有，侵权必究】如ng-click=”clo【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】se()”中的close()原创内容，盗版必究。原创内容，盗版必究。）和插值（如{{text}}）两种。怎么转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net生成一个作用域呢？最常用的就是在标签上加【本文受版权保护】原创内容，盗版必究。ng-app和ng-controller【版权所有，侵权必究】【本文受版权保护】指令，另外还有ng-repeat、ng-【作者：唐霜】转载请注明出处：www.tangshuang.netinclude、ng-switch、ng本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】-view可以创建作用域。当某些标签使用【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】了上述指令之后，这个标签范围内的HTML转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。结构，就可以调用指令对应脚本内的$sco【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。pe属性，一般一个应用内ng-app对应【版权所有】唐霜 www.tangshuang.net【作者：唐霜】的作用域变量是$rootScope，也就【转载请注明来源】原创内容，盗版必究。是最顶层的作用域，在ng-app内部创建本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】的任何作用域都可以继承$rootScop转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】e。

【原创不易，请尊重版权】【原创内容，转载请注明出处】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】

作用域继承【本文首发于唐霜的博客】

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】原创内容，盗版必究。【原创内容，转载请注明出处】

有关angular作用域继承问题的文章非未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。常多，文章开头也给了一个链接。这里，我想【作者：唐霜】【原创不易，请尊重版权】着重强调“继承”的本质和angular的【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】规律。

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

首先，我们讲的继承，实际上是表达“可以直【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。接用”这个想法。所谓可以直接用，就是不需【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】要你在脚本的$scope上加一个父级作用【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。域已经声明过的值，直接在HTML结构范围未经授权，禁止复制转载。【本文受版权保护】内使用即可。例如：

【本文受版权保护】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】

<div ng-controller="ParentController">
  <div ng-controller="ChildController">
    <span>{{textFromParentController}}</span>
  </div>
</div>

在ChildController对应的H【原创不易，请尊重版权】未经授权，禁止复制转载。TML结构范围内，仍然可以使用Paren【本文受版权保护】【原创内容，转载请注明出处】tController里面的$scope本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。.textFromParentContr【原创内容，转载请注明出处】【原创不易，请尊重版权】oller这个值。因此，在实际使用的时候转载请注明出处：www.tangshuang.net【作者：唐霜】，不要把“继承”理解的太过复杂。

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。

其次，作用域继承的本质，是子作用域创建或【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】实例化时，对父作用域里面$scope的引原创内容，盗版必究。【作者：唐霜】用，就和JavaScript的proto【本文受版权保护】【原创内容，转载请注明出处】type继承一摸一样，当在子作用域里面定转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】义了一个和父作用域同名的值时，它就覆盖了【原创内容，转载请注明出处】【版权所有，侵权必究】父作用域该同名值的引用，也就脱离了父级作本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】用域的控制。这样说还是太抽象，我们用为代【原创内容，转载请注明出处】【原创不易，请尊重版权】码来解释：

【未经授权禁止转载】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】

$parent.name = 'david'
$parent.age = 13

$scope.name = 'tom'
// 此时$scope.age自动获得13，这个过程相当于：
// $scope.prototype = $parent // 这是伪代码
// $scope.name = 'tom'
// 因此，当你改了$parent.age的时候，$scope.age也变了，但当你改$parent.name的时候，对$scope没有影响

总之，抛开一些特殊情况（上面提到的特殊内转载请注明出处：www.tangshuang.net【作者：唐霜】置指令），angular的普通作用域继承【作者：唐霜】本文作者：唐霜，转载请注明出处。是非常简单且容易理解的，甚至都不需要思考【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net，而且在HTML里面写作用域的值（或调用【转载请注明来源】未经授权，禁止复制转载。）非常自然，你不需要思考或顾虑太多，因为本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。你可以非常容易的觉察到哪些值是可以用的，【转载请注明来源】【转载请注明来源】哪些是不可以的。

指令的作用域【关注微信公众号：wwwtangshuangnet】

【原创内容，转载请注明出处】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

angular出色的扩展功能非指令莫属。转载请注明出处：www.tangshuang.net【转载请注明来源】但是指令的作用域又有点复杂。

【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【作者：唐霜】

首先，我们要知道指令的作用域到底是什么？【版权所有，侵权必究】未经授权，禁止复制转载。因为对于HTML文档中而言，一个ng指令【关注微信公众号：wwwtangshuangnet】【本文受版权保护】其实就是一个标签或属性，它不是一个完整的【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netHTML结构范围，何来作用域之说呢？但是【版权所有】唐霜 www.tangshuang.net【转载请注明来源】它的脚本里面又有$scope，那么这个$【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。scope到底是用在什么地方的呢？实际上【版权所有，侵权必究】【版权所有，侵权必究】，指令的脚本里面的$scope不是对使用【作者：唐霜】【关注微信公众号：wwwtangshuangnet】指令的HTML文档而言，而是指令自己内部【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。的templete内可用。比如说：

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【本文受版权保护】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

// controller.html
<div my-directive></div>

// my-directive.html
<span>{{text}}</span>

我们创建一个my-directive指令【原创内容，转载请注明出处】【本文首发于唐霜的博客】，而my-directive内使用tem【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】plateUrl使用my-directi著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】ve.html作为模板，因此，在my-d【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。irective.js脚本里面的$sco【版权所有，侵权必究】【作者：唐霜】pe对my-directive.html转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】内的插值或调用有效。

其次，指令作用域的继承问题。转载请注明出处：www.tangshuang.net

【转载请注明来源】著作权归作者所有，禁止商业用途转载。【作者：唐霜】本文版权归作者所有，未经授权不得转载。

在创建一个指令的时候，我们在指令的创建函原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】数返回值中，有一个scope选项：

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。原创内容，盗版必究。

module.exports = function() {
  return {
    restrict: 'A',
    scope: true,
  }
}

这里的scope选项就是用来确定，指令外原创内容，盗版必究。【原创不易，请尊重版权】部的作用域和指令内部的作用域之间的关系。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】默认情况下，scope:false，表示著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】共享父作用域，也就是说指令内部的$sco【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。pe直接是指令所依附的那个标签所在的作用【原创内容，转载请注明出处】【作者：唐霜】域的$scope（即JavaScript【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】里面的object引用），因此，无论是外【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。部的$scope发生变化，还是指令内部的【作者：唐霜】原创内容，盗版必究。$scope值发生变化，两边都是同步的，著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】也就会引起界面的变化，不过这种共享作用域本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net常常遇到一些不可预料的问题，所以很少直接本文版权归作者所有，未经授权不得转载。【转载请注明来源】用。而当scope:true，表示继承父【本文受版权保护】原创内容，盗版必究。作用域，继承模式也是原型继承，也就是说，原创内容，盗版必究。本文作者：唐霜，转载请注明出处。在指令内的$scope默认拥有指令依附的本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。那个标签所在的作用域的$scope值，当【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】然，如果你在指令内部修改了$scope的【原创内容，转载请注明出处】未经授权，禁止复制转载。某个属性，那么这个属性值将覆盖外部作用域【本文首发于唐霜的博客】未经授权，禁止复制转载。对应的属性值。

【作者：唐霜】【转载请注明来源】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

当思路到这里的时候，一个自然而然的问题浮原创内容，盗版必究。【未经授权禁止转载】现了。如果在$scope默认没有值的情况著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。下，会自动继承父级$scope的值，但是著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】如果我新设了一个属性值覆盖了父级$sco未经授权，禁止复制转载。未经授权，禁止复制转载。pe的属性值，父级$scope对应属性值【作者：唐霜】【作者：唐霜】再变时，会不会影响当前这个$scope被【本文受版权保护】【版权所有】唐霜 www.tangshuang.net设置的新值？
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】本文作者：唐霜，转载请注明出处。
这个答案是显而易见的：【转载请注明来源】在你没有设那个属性值之前，修改父$sco【本文受版权保护】原创内容，盗版必究。pe对应属性，子作用域继承了父作用域，那未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。个属性值是跟着变的，界面也随着变化。但是【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】，一旦当你设置了新值的那一刻，继承关系就转载请注明出处：www.tangshuang.net【作者：唐霜】断了，这个属性将不再相互影响，子作用域当【版权所有，侵权必究】【原创不易，请尊重版权】然不会影响父作用域，同时，父作用域也不会【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。影响子作用域。实际上，理解这一点，用JavaScrip本文作者：唐霜，转载请注明出处。【作者：唐霜】t的原型链继承是再适合不过的，这就考你的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。基础功了。
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

除了把指令的scope选项设置为true未经授权，禁止复制转载。【本文受版权保护】|false之外，还可以设置为一个{}，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。例如：

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

return {
  restrict: 'A',
  scope: {
    name: '@name',
    age: '=age',
    sing: '&sing',
    father: '@',
    mother: '@?',
  },
}

上面5种情况分别代表了5种表达方式，但表【本文受版权保护】原创内容，盗版必究。达与外部作用域关系的，只有3种，现在一一【关注微信公众号：wwwtangshuangnet】【本文受版权保护】解释。

未经授权，禁止复制转载。【未经授权禁止转载】【转载请注明来源】原创内容，盗版必究。

‘@name’表著作权归作者所有，禁止商业用途转载。【本文受版权保护】示这个指令所依附的标签接受一个name属【未经授权禁止转载】【未经授权禁止转载】性，这个name属性传入的值，是一个字符本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。串，字符串将作为当前指令里面的$scop【未经授权禁止转载】本文作者：唐霜，转载请注明出处。e的某属性值，在当前作用域修改这个值，不本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】会影响外部作用域的对应值，举个例子：

// 外部
<div pass-value="myName"></div> // 即使你的$scope.myName = 'tomy'，directive内部接收到的也是myName这个字符串
<div pass-value="{{myName}}"></div> // 你的$scope.myName = 'lucy', 那么directive内部接收到的就是lucy

‘=age’表示著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】接受age属性，并且把它的值当作一个变量著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。，实现穿透（继承转载请注明出处：www.tangshuang.net），在当前作用域修改这个变量，会影响外部【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net作用域对应的变量值，例如：

// 外部
<div pass-value="myValue"> // 其中myValue={ name: 'tomy' }

// directive内部
{
  template: '<a href="#" ng-click="onClick()">xxx</a>',
  scope: {
    value: '=passValue',
  },
  link($scope) {
    $scope.onClick = function() {
      $scope.value.name = 'lucy'
    }
  },
}

当点击指令内的链接时，外部作用域的myV【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】alue.name也被修改了。这是js数本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】据类型决定的。但是要注意，如果你直接修改$scope.value = { name: 'lucy' }，则不会产生任何结果，并且，这样pass【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netValue和$scope.value的引本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。用关系段了，对$scope.value的【本文受版权保护】转载请注明出处：www.tangshuang.net任何修改都不会再影响外部作用域都myVa【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】lue，因此要特别注意这一点。

‘&singR【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。17;表示接受sing属性，但是sing【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net属性的值必须是一个函数转载请注明出处：www.tangshuang.net，而且和=一样，它是一个【本文首发于唐霜的博客】继承【作者：唐霜】的值。本文版权归作者所有，未经授权不得转载。

【作者：唐霜】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

‘@’表示接受一【本文受版权保护】【本文受版权保护】个father属性，之所以在@后面省略内【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】容，是因为这个属性值跟前面的father本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】是一模一样的，而前面那些@name, =【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】age，都可以不一样，比如可以是@my-【原创内容，转载请注明出处】【原创内容，转载请注明出处】name, =my-age，外部标签的属原创内容，盗版必究。【转载请注明来源】性名和内部$scope的属性名不同，但具【转载请注明来源】转载请注明出处：www.tangshuang.net有对应关系。

‘@?’表示可以【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。接受一个mother属性，也可以不传，?【关注微信公众号：wwwtangshuangnet】【作者：唐霜】的意思就是可选。

【未经授权禁止转载】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【本文受版权保护】未经授权，禁止复制转载。

如上所述，实际上，指令内部的$scope【未经授权禁止转载】本文作者：唐霜，转载请注明出处。属性通过3个特殊的符号和外部作用域上的值【原创不易，请尊重版权】【本文受版权保护】进行绑定，你只需要分清楚@传进来的一定是转载请注明出处：www.tangshuang.net【本文受版权保护】字符串即可。

脏检查和双向绑定【版权所有】唐霜 www.tangshuang.net

著作权归作者所有，禁止商业用途转载。【转载请注明来源】【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【原创内容，转载请注明出处】【转载请注明来源】【转载请注明来源】

当$scope的一个属性被改变时，界面可著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】能会更新。那么为什么angular里面，【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。修改$scope上的一个属性，可以引起界未经授权，禁止复制转载。【原创不易，请尊重版权】面的变化呢？这是angular的数据响应原创内容，盗版必究。【原创内容，转载请注明出处】机制决定的。在angular里面就是脏检本文作者：唐霜，转载请注明出处。【未经授权禁止转载】查机制。而脏检查，和双向绑定离不开。

【原创内容，转载请注明出处】原创内容，盗版必究。【本文受版权保护】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

这里插句题外话，JavaScript里面【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。非常有意思的一种接口，当你修改（或新增）著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。一个对象的某个属性时，会触发该对象里面的【本文首发于唐霜的博客】原创内容，盗版必究。setter。如果你对这块不是很了解，可【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】以先学一下Object.definePropert【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】y，包括这两年超级火的vuejs也是通过这原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】个接口实现的。它是一个ES5的标准接口，【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。据说IE8以下的浏览器都可能支持。
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】
我们可以设计一种实现，当你修改或赋值$s【未经授权禁止转载】【转载请注明来源】cope的某个属性时，就触发了$scop本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】e这个js对象的setter，我们可以自【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】定义这个setter，它是一个函数，在这著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】个函数内部，调用某些逻辑去更新界面。同时【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，为了确保新塞进来的对象也可以被监听到变【原创不易，请尊重版权】【作者：唐霜】化，在你赋值时，还要把赋值进来的对象也进【版权所有，侵权必究】【本文首发于唐霜的博客】行改造，改造为可以被监听的对象。
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【本文受版权保护】

双向绑定顾名思义是两个过程，一个是将$s【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。cope属性值绑定到HTML结构中，当$【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】scope属性值发生变化的时候界面也发生【原创不易，请尊重版权】【原创不易，请尊重版权】变化；另一个是，当用户在界面上进行操作，本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。例如点击、输入、选择时，自动触发$sco本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netpe属性的变化（界面也可能跟着变）。而脏【未经授权禁止转载】未经授权，禁止复制转载。检查的作用是“在当$scope属性值发生原创内容，盗版必究。【转载请注明来源】变化的时候促使界面发生变化”。

angular的数据响应机制【访问 www.tangshuang.net 获取更多精彩内容】

那么，在代码层面，angular是怎么做本文作者：唐霜，转载请注明出处。【转载请注明来源】到监听数据变动然后更新界面的呢？答案是，转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。angular根本不监听数据的变动，而是【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。在恰当的时机从$rootScope开始遍【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】历所有$scope，检查它们上面的属性值【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net是否有变化，如果有变化，就用一个变量di【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netrty记录为true，再次进行遍历，如此【作者：唐霜】【关注微信公众号：wwwtangshuangnet】往复，直到某一个遍历完成时，这些$sco未经授权，禁止复制转载。未经授权，禁止复制转载。pe的属性值都没有变化时，结束遍历。由于著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。使用了一个dirty变量作为记录，因此被本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】称为脏检查机制。

“恰当的时机”是什么时候？【版权所有】唐霜 www.tangshuang.net

【本文首发于唐霜的博客】

【转载请注明来源】

【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。

如何做到知道属性值是否有变化？【转载请注明来源】

著作权归作者所有，禁止商业用途转载。

【未经授权禁止转载】

【原创不易，请尊重版权】

这个遍历循环是怎么实现的？【关注微信公众号：wwwtangshuangnet】

【未经授权禁止转载】

原创内容，盗版必究。

【原创内容，转载请注明出处】

【转载请注明来源】

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文受版权保护】

$watch绑定要检查的值本文版权归作者所有，未经授权不得转载。

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

简单的说，当一个作用域创建的时候，ang【版权所有，侵权必究】【版权所有，侵权必究】ular会去解析模板中当前作用域下的模板【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】结构，并且自动将那些插值（如{{text【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】}}）或调用（如ng-model=未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net221;age”）找出来，并【作者：唐霜】【原创内容，转载请注明出处】利用$watch建立绑定，它的回调函数用【本文受版权保护】【版权所有】唐霜 www.tangshuang.net于决定如果新值和旧值不同时（或相同时）要本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net干什么事。当然，你也可以手动在脚本里面使转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net用$scope.$watch对某个属性进著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。行绑定。它的使用方法如下：

【转载请注明来源】【本文受版权保护】【原创不易，请尊重版权】原创内容，盗版必究。

$scope.$watch(string|function, listener, objectEquality, prettyPrintExpression)

第一个参数是一个字符串或函数，如果是函数【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。，需要运行后得到一个字符串，这个字符串用转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】于确定将绑定$scope上的哪个属性。l【作者：唐霜】本文版权归作者所有，未经授权不得转载。istener则是回调函数，表示当这个属【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net性的值发生变化时，执行该函数。objec【本文受版权保护】【版权所有】唐霜 www.tangshuang.nettEquality是一个boolean，【作者：唐霜】著作权归作者所有，禁止商业用途转载。为true的时候，会对object进行深【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。检查（懂什么叫深拷贝的话就懂深检查）。第【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】四个参数是如何解析第一个参数的表达式，使转载请注明出处：www.tangshuang.net【版权所有，侵权必究】用比较复杂，一般不传。

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

$digest遍历递归本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。【转载请注明来源】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

当使用$watch绑定了要检查的属性之后【版权所有】唐霜 www.tangshuang.net【本文受版权保护】，当这个属性发生变化，就会执行回调函数。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。但是前面已经说过了，angular里面没本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】有监听这么一说。它没有用object的s原创内容，盗版必究。未经授权，禁止复制转载。etter机制（angular2之后改进转载请注明出处：www.tangshuang.net【版权所有，侵权必究】并采用了这个机制），而是脏检查机制。脏检【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net查的核心，就是$digest循环。当用户未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。执行了某些操作之后，angular内部会【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】调用$digest()，最终导致界面重新【本文受版权保护】【本文首发于唐霜的博客】渲染。那么它究竟是怎么一回事呢？

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【本文受版权保护】

调用$watch之后，对应的信息被绑定到原创内容，盗版必究。【原创不易，请尊重版权】angular内部的一个$$watche【本文首发于唐霜的博客】原创内容，盗版必究。rs中，它是一个队列（数组），而当$di原创内容，盗版必究。原创内容，盗版必究。gest被触发时，angular就会去遍著作权归作者所有，禁止商业用途转载。【转载请注明来源】历这个数组，并且用一个dirty变量记录本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net$$watchers里面记录的那些$sc【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】ope属性是否有变化，当有变化的时候，d【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。irty被设置为true，在$diges原创内容，盗版必究。【版权所有，侵权必究】t执行结束的时候，它会再检查dirty，【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。如果dirty为true，它会再调用自己著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】，直到dirty为true。但是为了防止【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net死循环，angular规定，当递归发生了【作者：唐霜】原创内容，盗版必究。10次或以上时，直接抛出一个错误，并跳出【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】循环。

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

递归流程如下：【原创不易，请尊重版权】

判断dirty是否为true，如果为fa本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。lse，则不进行$digest递归。（d著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】irty默认为true）

原创内容，盗版必究。

【原创内容，转载请注明出处】

【原创不易，请尊重版权】

遍历$$watchers，取出对应的属性【本文首发于唐霜的博客】【转载请注明来源】值的老值和新值

本文作者：唐霜，转载请注明出处。

【本文首发于唐霜的博客】

转载请注明出处：www.tangshuang.net

根据objectEquality进行新老转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net值的对比。

【原创内容，转载请注明出处】

【作者：唐霜】

【本文首发于唐霜的博客】

如果两个值不同，则继续往下执行。如果两个【转载请注明来源】本文作者：唐霜，转载请注明出处。值相同，则设置dirty为false，跳原创内容，盗版必究。转载请注明出处：www.tangshuang.net出递归。

著作权归作者所有，禁止商业用途转载。

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

设置dirty为true【本文首发于唐霜的博客】

原创内容，盗版必究。

【原创内容，转载请注明出处】

【未经授权禁止转载】

用新值代替老值，这样，在下一轮递归的时候【原创内容，转载请注明出处】原创内容，盗版必究。，老值就是这一轮的新值

未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】

再次调用$digest本文版权归作者所有，未经授权不得转载。

【关注微信公众号：wwwtangshuangnet】

【原创内容，转载请注明出处】

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。

当递归流程结束之后，$digest还要执【本文首发于唐霜的博客】未经授权，禁止复制转载。行：

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

【本文首发于唐霜的博客】

当一个作用域创建完之后，$scope.$未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】digest会被运行一次。dirty的默【原创内容，转载请注明出处】【原创内容，转载请注明出处】认值被设定为true，因此，如果你在co【原创不易，请尊重版权】未经授权，禁止复制转载。ntroller里面使用了$watch，原创内容，盗版必究。本文作者：唐霜，转载请注明出处。并且进行了属性赋值，往往刷新页面就可以看【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。到$watch的回调函数被执行了。但是，原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。现在问题来了，上面说的“angular内【作者：唐霜】【作者：唐霜】部会调用$digest()”，这个内部是【关注微信公众号：wwwtangshuangnet】【转载请注明来源】怎么实现的？

$apply触发$digest【访问 www.tangshuang.net 获取更多精彩内容】

在我们自己编程时，并不直接使用$dige转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。st，而是调用$scope.$apply【本文首发于唐霜的博客】【作者：唐霜】()，$apply内部会触发$diges【未经授权禁止转载】【作者：唐霜】t递归遍历。同时，你可以给$apply传【本文首发于唐霜的博客】【原创内容，转载请注明出处】一个参数，是个函数，这个函数会在$dig【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】est开始之前执行。现在回到上面的问题，转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netangular内部怎么触发$digest【转载请注明来源】【原创内容，转载请注明出处】？实际上，angular里面要求你通过n【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】g-click, ng-modal, n【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。g-keyup等来进行数据的双向绑定，为原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net什么，因为这些angular的内部指令封【原创不易，请尊重版权】原创内容，盗版必究。装了$apply，比如ng-click，【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。它其实包含了document.addEv【原创不易，请尊重版权】原创内容，盗版必究。entListener(‘c【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。lick’)和$scope.【本文受版权保护】转载请注明出处：www.tangshuang.net$apply()两个过程。所谓的数据双向【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net绑定，其实也就是ng-input和$sc【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。ope.$apply的同时运行。

【本文受版权保护】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

当用户在模板里面使用ng-click时，原创内容，盗版必究。本文作者：唐霜，转载请注明出处。如下：

【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

<div ng-click="update()">change</div>

$scope.update = function() {
  $scope.name = 'tom'
}

实际上，当用户点击之后，angular内本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。部还会执行$scope.$apply()原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】，从而触发$digest遍历递归，最终触本文作者：唐霜，转载请注明出处。【作者：唐霜】发界面重绘。

手动调用$apply【作者：唐霜】

【转载请注明来源】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

但是有些情况下，我们不可能直接使用ang未经授权，禁止复制转载。原创内容，盗版必究。ular内部指令，有两种情况我们需要手动原创内容，盗版必究。【本文首发于唐霜的博客】调用$apply，一种是调用angula【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。r内置的语法糖，比如$http, $ti【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】meout，另一种是我们没有使用angu本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。lar内部机制去更新了$scope，比如著作权归作者所有，禁止商业用途转载。【转载请注明来源】我们用$element.on(̵本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net6;click’, () =【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】> $scope.name = &【作者：唐霜】未经授权，禁止复制转载。#8216;lucy’)。也【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net就是说“异步”和“机制外”修改$scop【原创不易，请尊重版权】【原创内容，转载请注明出处】e属性值之后，我们都要手动调用$appl原创内容，盗版必究。【作者：唐霜】y，虽然我们在调用$timeout的时候【作者：唐霜】【原创不易，请尊重版权】，没有手写$apply，但实际上它内部确转载请注明出处：www.tangshuang.net【未经授权禁止转载】实调用了$apply:

【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

function($timeout) {
  // 当我们通过on('click')的方式触发某些更新的时候，可以这样做
  $timeout(() => {
    $scope.name = 'lily'
  })
  // 也可以这样做
  $element.on('click', () => {
    $scope.name = 'david'
    $scope.$apply()
  })
}

但是，一定要注意，在递归过程中，绝对不能【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】手动调用$apply，比如在ng-cli转载请注明出处：www.tangshuang.net【作者：唐霜】ck的函数中，比如在$watch的回调函原创内容，盗版必究。本文作者：唐霜，转载请注明出处。数中。

【转载请注明来源】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】

伪代码实现【原创不易，请尊重版权】

通过上面的讲解，你可能已经对angula【作者：唐霜】本文作者：唐霜，转载请注明出处。r里面的脏检查已经了解了，但是我们还是希【本文受版权保护】【原创不易，请尊重版权】望更深入，用代码来把事情说清楚。我这里不【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】去抄写angular的源码，而是自己写一著作权归作者所有，禁止商业用途转载。【本文受版权保护】段伪代码，这样更有助于理解整个机制。

import { isEqual } from 'lodash'

class Scope {
  constructor() {
    this.$$dirty = true
    this.$$count = 0
    this.$$watchers = []
  }
  $watch(property, listener, deepEqual) {
    let watcher = {
      property,
      listener,
      deepEqual,
    }
    this.$$watchers.push(watcher)
  }
  $digest() {
    if (this.$$count >= 10) {
      throw new Error('$digest超过10次')
    }

    this.$$watchers.forEach(watcher => {
      let newValue = eval('return this.' + watcher.property)
      let oldValue = watcher.oldValue
      if (watcher.deepEqual && isEqual(newValue, oldValue)) {
        watcher.dirty = false
      } 
      else if (newValue === oldValue) {
        watcher.dirty = false
      }
      else {
        watcher.dirty = true
        eval('this.' + watcher.property + ' = ' newValue)
        watcher.listener(newValue, oldValue) // 注意，listener是在newValue赋值给$scope之后执行的
        watcher.oldValue = newValue
      }
      // 这里的实现和angular逻辑里面有一点不同，angular里面，当newValue和oldValue都为undefined时，listener会被调用，可能是angular里面在$watch的时候，会自动给$scope加上原本没有的属性，因此认为是一次变动
    })
    
    this.$$count ++

    this.$$dirty = false
    for (let watcher of this.$$watchers) {
      if (watcher.dirty) {
        this.$$dirty = true
        break
      }
    }

    if (this.$$dirty) {
      this.$digest()
    }
    else {
       this.$patch()
       this.$$dirty = true
       this.$$count = 0
    }
  }
  $apply() {
    if (this.$$count) {
      return // 当$digest执行的过程中，不能触发$apply
    }
    this.$$dirty = true
    this.$$count = 0
    this.$digest()
  }
  $patch() {
    // 重绘界面
  }
}

function ControllerRegister(controllerTemplate, controllerFunction) {
  let $scope = new Scope()
  $paser(controllerTemplate, $scope) // 解析controller的模板，把模板中的属性全部都解析出来，并且把这些属性赋值给$scope
  controllerFunction($scope) // 在controllerFunction内部可能又给$scope添加了一些属性，注意，不能在运行controllerFunction的时候调用$scope.$apply()

  let properties = Object.keys($scope) // 找出$scope上的所有属性
  // 要把$scope上的一些内置属性排除掉  
  properties = properties.filter(item => item.indexOf('$') !== 0) // 当然，这种排除方法只能保证在用户不使用$作为属性开头的时候有用

  properties.forEach(property => {
    $scope.$watch(property, () => {}, true)
  })

  $scope.$digest()
}

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】

【作者：唐霜】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

我们回到文章开头的问题，那段代码的问题究未经授权，禁止复制转载。【版权所有，侵权必究】竟在哪里呢？通过本文的解释，你应该非常容【原创不易，请尊重版权】【本文首发于唐霜的博客】易知道，代码中使用了on(‘本文版权归作者所有，未经授权不得转载。【本文受版权保护】click’)而没有调用$a【未经授权禁止转载】【原创不易，请尊重版权】pply，正确的做法是使用ng-clic本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。k。但是，出了这个问题，还有另外一个问题【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】，就是作用域的继承问题。

【原创内容，转载请注明出处】【未经授权禁止转载】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

在directiveB中，直接使用$sc转载请注明出处：www.tangshuang.net【未经授权禁止转载】ope.members = newVal【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ue，虽然看上去父级作用域里面的memb【本文受版权保护】【原创不易，请尊重版权】ers应该也要等于新的值，但是我们从js本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】的角度出发来看下：

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【转载请注明来源】转载请注明出处：www.tangshuang.net

directiveB.$scope.members = controllerA.$scope.members
directiveB.$scope.members = newMembers
controllerA.$scope.members = ?

显然，这是一个超出预期的结果，一切都是j【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。s里面object是引用型数据的锅。那么【未经授权禁止转载】原创内容，盗版必究。要保证修改没问题，要怎么办呢？

directiveB.$scope.members = controllerA.$scope.members
for (let i = 0; i < newMembers.length; i ++) {
  directiveB.$scope.members.splice(i, 1, newMembers[i])
}
controllerA.$scope.members = ?

当使用数组的时候，要格外小心，因为数组是原创内容，盗版必究。【未经授权禁止转载】特殊的object，它比普通的objec未经授权，禁止复制转载。原创内容，盗版必究。t更加复杂。

【原创不易，请尊重版权】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【原创不易，请尊重版权】

好了，关于angular里面的一些用法就【原创不易，请尊重版权】原创内容，盗版必究。讲到这里。肯定有很多不足的地方，欢迎在下【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】方留言和我交流。

转载请注明出处：www.tangshuang.net原创内容，盗版必究。【原创不易，请尊重版权】

未经授权，禁止复制转载。【原创内容，转载请注明出处】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【原创不易，请尊重版权】【本文首发于唐霜的博客】【原创内容，转载请注明出处】【原创不易，请尊重版权】【原创内容，转载请注明出处】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【作者：唐霜】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【本文受版权保护】【原创不易，请尊重版权】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【作者：唐霜】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【作者：唐霜】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net原创内容，盗版必究。原创内容，盗版必究。【本文首发于唐霜的博客】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】转载请注明出处：www.tangshuang.net原创内容，盗版必究。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】

2018-06-07 5360 angular

唐霜

angular脏检查机制，及指令中修改$scope致父级作用域无法接收到问题

问题还原转载请注明出处：www.tangshuang.net

angular的作用域【版权所有，侵权必究】

作用域继承【本文首发于唐霜的博客】

指令的作用域【关注微信公众号：wwwtangshuangnet】

脏检查和双向绑定【版权所有】唐霜 www.tangshuang.net

angular的数据响应机制【访问 www.tangshuang.net 获取更多精彩内容】

$watch绑定要检查的值本文版权归作者所有，未经授权不得转载。

$digest遍历递归本文作者：唐霜，转载请注明出处。

$apply触发$digest【访问 www.tangshuang.net 获取更多精彩内容】

手动调用$apply【作者：唐霜】

伪代码实现【原创不易，请尊重版权】

问题的解决【版权所有，侵权必究】

为价值买单，打赏一杯咖啡

声明

关于

生态