【转】angular学习笔记(十四)-$watch(1)

时间 2019-11-19

标签 angular 学习笔记十四 watch 栏目 AngularJS 繁體版

原文原文链接

本篇主要介绍$watch的基本概念:css

$watch是全部控制器的$scope中内置的方法:html

$scope.$watch(watchObj,watchCallback,ifDeep)数组

watchObj:app

须要被检测的对象,能够是如下任意一种:函数

1. 某个数据,监测这个数据的值是否发生变化spa

2. 一条angular表达式,监测表达式的结果是否发生变化code

3. 函数(),监测函数的返回值是否发生变化htm

注意,以上三种,不管是哪一种,都应该是字符串格式,而且都是在$scope做用域下执行的.对象

4.函数,非字符串格式,而是直接传入一个函数,能够直接写一个匿名函数,也能够传入一个函数,注意,它不是在$scope做用域下的,因此,若是传入的是当前做用域下的函数,仍是须要写:$scope.funblog

watchCallback :

接受一个函数或者表达式,当watchObj发生变化是会被调用或执行.

若是是函数形式,它会收到三个参数:

watchCallback (newValue,oldValue,scope)

newValue: watchObj的新的值

oldValue: watchObj的旧的值

scope: 就是当前控制器的$scope

注意:函数或者表达式不是在$scope做用域下执行的,因此,若是是须要调用当前做用域下的某个函数,应该$scope.watchCallback

ifDeep:

一个布尔值

若是 watchObj 的类型是对象或者数组的时候, ifDeep值设置为true, 那么angular会检测被监控对象的每一个属性是否发生了变化,而不仅是检测一个简单的值.

最后,$(watch)会返回一个函数,这个函数能够用来销毁该控制器,只须要被调用一次便可:

var destroy = $scope.$watch(...);

destroy()

下面看个最基本的例子:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>11.1$watch监控数据变化</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script src="script.js"></script>
  <style type="text/css">
    *{
      font-family:'MICROSOFT YAHEI';
      font-size:12px
    }
  </style>
</head>
<body>
<div ng-controller = "Watch">
  <input type="text" ng-model="number"/>
  <span>{{result}}</span>
</div>
</body>
</html>

function Watch ($scope){
    $scope.number = 0;
    $scope.count = function(newValue,oldValue,scope){
        $scope.result = $scope.number*3;
        console.log(newValue);
        console.log(oldValue);
        console.log(scope);
        return $scope.result
    };
    $scope.$watch('number',$scope.count,false)
}

咱们监测了number这个数据,当number发生变化时,即调用count这个函数,改变result的值.

其中,count中的三个参数分别接受了number的新值,旧值,以及当前控制器的$scope:

好比我在文本域中输入3:

------------------------------------------------------------------------------------------------------------------------------------

遗留问题:

在$watch的第一个参数中传入一个函数时,即便该函数并无返回值,同样能够被监测.so,不明白它到底是在监测什么东西的变化.

例子能够参考下一篇笔记http://www.cnblogs.com/liulangmao/p/3723385.html

from： http://www.cnblogs.com/liulangmao/p/3722885.html