Angularjs[7] - $scrope 中 $watch 方法：

Posted 。娴

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angularjs[7] - $scrope 中 $watch 方法：相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app>
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name">
            改变次数：{{count}}--{{name}}
        </div>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>
var firstController = function ($scope) {
    $scope.name = \'Alrale\';
    $scope.date = {
        name : \'Alrale\',
        count : 20
    }
    $scope.count = 0;
    //当 model 每次改变时，都会触发第2个函数
    $scope.$watch(\'name\',function (newValue,oldValue) {
        console.log(newValue);
        ++$scope.count;
        if($scope.count > 30){
            $scope.name = \'已大于30次\';
        }
    })

    $scope.$watch(\'date\',function () {
        // $scope.$watch(\'date.name\',function(){})
    },true)
}

 

  • Angular 内部的 watch 实现了页面的 model 的及时更新。
  • $watch(watchFn, watchAction, deepWatch)

   　  - watchFn: angular 表达式或函数字符串；
   　  - watchAction(newValue, oldValue, scope): watchFn 发生变化时会被调用；
   　  - deepWatch: 可选的布尔值命令检查被监控的对象的每个属性是否发生变化。 

 

以上是关于Angularjs[7] - $scrope 中 $watch 方法：的主要内容，如果未能解决你的问题，请参考以下文章

将 AngularJS 数组传递给降级的 Angular 7 组件

Angularjs 选择了 jquery-chosen 1.8.7 和 angularjs 1.8.0 的异常

AngularJs学习笔记7——四大特性之模块化设计

使用 Angular 7 在混合应用程序中加载 Angularjs 包

angularjs 设置全局变量的7种方法

angularjs 设置全局变量的7种方法