angular中$watch方法的案例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹了angular中$watch方法的案例分析，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)網(wǎng)站建設公司，提供網(wǎng)站設計制作、成都網(wǎng)站設計，網(wǎng)頁設計，建網(wǎng)站，PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;可快速的進行網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展；專業(yè)做搜索引擎喜愛的網(wǎng)站，是專業(yè)的做網(wǎng)站團隊，希望更多企業(yè)前來合作!

在$apply方法中提到過臟檢查，首先apply方法會觸發(fā)evel方法，當evel方法解析成功后，會去觸發(fā)digest方法，digest方法會觸發(fā)watch方法。

(1)$watch簡介

在digest執(zhí)行時，如果watch觀察的的value與上一次執(zhí)行時不一樣時，就會被觸發(fā)。

AngularJS內(nèi)部的watch實現(xiàn)了頁面隨model的及時更新。

$watch方法在用的時候主要是手動的監(jiān)聽一個對象，但對象發(fā)生變化時觸發(fā)某個事件。

(2)watch方法用法

$watch(watchFn,watchAction,deepWatch)

watchFn:angular表達式或函數(shù)的字符串

watchAction(newValue,oldValue,scope):watchFn發(fā)生變化會被調(diào)用

deepWatch：可選的布爾值命令檢查被監(jiān)控的對象的每個屬性是否發(fā)生變化

$watch會返回一個函數(shù)，想要注銷這個watch可以使用函數(shù)

(3)例子

在前面的例子中，當name的表單改變30次，然后觸發(fā)某個事件。

控制器代碼如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var firstController = function ($scope){
    $scope.n
ame='張三';
        $scope.count=0;
    
    // 監(jiān)聽一個model 當一個model每次改變時 都會觸發(fā)第2個函數(shù)
    $scope.$watch('name',function(newValue,oldValue){
 
        ++$scope.count;
 
        if($scope.count > 30){
            $scope.name = '已經(jīng)大于30次了';
        }
    });
 
}

html代碼如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <p ng-app="">
 
        <p ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
 
            改變次數(shù):{{count}}-{{name}}
        </p>
    </p>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

運行效果如下：

前30次可以隨意修改：

angular中$watch方法的案例分析

當修改了30次后，name固定為'已經(jīng)大于30次了'：

angular中$watch方法的案例分析

這就是watch的作用，model每一次改變時都會觸發(fā)第二個函數(shù)。

(4)watch的第三個參數(shù)

當監(jiān)聽的為一個對象或者數(shù)組時，例如：

1

2

3

4

$scope.data = {
        name :'李四',
        count:20
    }

此時data里的name和count都要監(jiān)聽，那么可以這么寫：

1

2

3

$scope.$watch('data',function(){
 
    },true)

如果不加第三個參數(shù)，那么只會監(jiān)聽data，只有當data引用改變時才會觸發(fā)。

因此當需要監(jiān)聽一些引用對象需要把第三個參數(shù)設置成true。

感謝你能夠認真閱讀完這篇文章，希望小編分享angular中$watch方法的案例分析內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細的解決方法等著你來學習!

當前文章：angular中$watch方法的案例分析-創(chuàng)新互聯(lián)
當前地址：http://muchs.cn/article0/ioioo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、企業(yè)網(wǎng)站制作、軟件開發(fā)、網(wǎng)站內(nèi)鏈、做網(wǎng)站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)