angular學習筆記(十四)-$watch(1)

時間 2019-11-18

標籤 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: