Angular中$scpe的$apply

Angular中$scpe的$apply

什么是$scope

• $scope是一个指向应用model的object，也是表达式的上下文。
• $scope被放置于一个类似应用的DOM结构的层次结构中

Angular是如何检测变量发生改变的

变量发生改变不外乎两种方式

• 能通过固定的接口才能改变变量的值,比如说通过set()设置变量的值，当调用set()是变量就发生改变了,如下例子，通过setb()直接改变变量。这种方法缺点是过于频繁

  var obj={
          setb:function (key,val) {
              obj[key]=val;
              console.log(val);
              console.log(document.querySelector("#a"));
              document.querySelector("#a").innerHTML=val;//找到id为a的元素
          }
      }
      obj.setb("name","my name si kangkang");
  

• 脏检测，将原来对象复制一份快照，在某个时间比较现在对象与快照，如果不一样则发生改变，这个策略要保留两份变量，并且要遍历对象，比较每个属性，这样还有一定的性能问题。
  Angular使用的就是脏检查

$apply的用法

在使用$apply我们先举个栗子，如下代码：

var dapp=angular.module("dapp",[]);
    dapp.controller("mycontrol",function ($scope) {
        $scope.date=new Date();
        setInterval(function () {
            //虽然值改变了但是没有进行脏检查,所以页面上的值并没有改变
            $scope.date=new Date();
        },1000);
    });

上边的代码运行后页面上的date并没有实时更新，为什么呢?原因很简单，Angular没有触发脏检查所以Angular并不知道你的date变量发生改变。那我们要如何取触发Angular的脏检查呢？我们可以通过$apply来触发脏检查,代码如下。

var dapp=angular.module("dapp",[]);
    dapp.controller("mycontrol",function ($scope) {
        $scope.date=new Date();

        setInterval(function () {
            $scope.$apply(function () {
                //会进行脏检查，通过脏检查改变页面变量的值
                $scope.date=new Date();
            });
        },1000);
    });

通过$scope的$apply去触发脏检查让Angular知道变量发生了改变。

最后，这里贴上html的代码

<div ng-app="dapp">
    <div ng-controller="mycontrol">
        {{date}}
    </div>
</div>

有什么错误的地方希望能够指出，共同进步！