angularJS--watch()方法

时间 2019-11-09

原文原文链接

在使用AngulaJS编写应用时，咱们常常须要作的一件事情就是对模型中的变量进行监视，并对其发生的变化作出相应的回应。AngularJS为咱们提供了一个很是方便的$watch方法，它能够帮助咱们在每一个scope中监视其中的变量。下面是一个很是简单的例子：


<!DOCTYPE html>
<html ng-app>
<head>
    <meta  charset="utf-8">
    <title>二、angularjs的$watch()方法</title>
    <script src="../js/angularjs.js"></script>
    <script src="../js/index7.js"></script>

</head>
<body>
<!-- angularjs的数据绑定，双向绑定，M,V,c之间的绑定 -->


    <div ng-controller="firstController">
        <input type="text" ng-model="name" value="" />
        <p>改变次数：{{count}}---{{name}}</p>
    </div>


</body>
</html>

var firstController=function($scope){
     $scope.name="张三";
     $scope.count=0;
    $scope.$watch("name",function(newValue,oldValue){
        console.log(newValue,oldValue);
        ++$scope.count;
        if ($scope.count>10) {
            $scope.name="输入发生10次变化";
        };
    });
}

在AngularJS内部，每当咱们对ng-model绑定的name属性进行一次修改，AngularJS内部的$digest就会运行一次，并在运行结束以后检查咱们使用$watch来监视的东西，若是和进行上一次$digest以前相比有了变化，则执行咱们在其中绑定的处理函数。html