快捷導(dǎo)航

AngularJS實(shí)現(xiàn)一次監(jiān)聽(tīng)多個(gè)值發(fā)生的變化

更新時(shí)間：2016年08月31日 11:57:25 作者：MakingChoice

這文章給大家介紹了如何利用AngularJS一次監(jiān)聽(tīng)多個(gè)值發(fā)生的變化，文中通過(guò)示例代碼演示，這樣更方便大家理解學(xué)習(xí)，有需要的可以參考借鑒。

一、$watch簡(jiǎn)單使用

$watch是一個(gè)scope函數(shù)，用于監(jiān)聽(tīng)模型變化，當(dāng)你的模型部分發(fā)生變化時(shí)它會(huì)通知你。

$watch(watchExpression, listener, objectEquality);

每個(gè)參數(shù)的說(shuō)明如下：

watchExpression：監(jiān)聽(tīng)的對(duì)象，它可以是一個(gè)angular表達(dá)式如'name',或函數(shù)如function(){return $scope.name} 。

listener:當(dāng)watchExpression變化時(shí)會(huì)被調(diào)用的函數(shù)或者表達(dá)式,它接收3個(gè)參數(shù)：newValue(新值), oldValue(舊值), scope(作用域的引用)

objectEquality：是否深度監(jiān)聽(tīng)，如果設(shè)置為true,它告訴Angular檢查所監(jiān)控的對(duì)象中每一個(gè)屬性的變化. 如果你希望監(jiān)控?cái)?shù)組的個(gè)別元素或者對(duì)象的屬性而不是一個(gè)普通的值, 那么你應(yīng)該使用它

舉個(gè)栗子：

$scope.name = 'hello';

var watch = $scope.$watch('name',function(newValue,oldValue, scope){

    console.log(newValue);

    console.log(oldValue);

});

$timeout(function(){

    $scope.name = "world";

},1000);

二、監(jiān)聽(tīng)多個(gè)值的變化

大家通常遇到的情況為通過(guò)$watch()一次監(jiān)聽(tīng)一個(gè)值的變化，當(dāng)然這種時(shí)候滿足絕大部分情況。但是通過(guò)閱讀官網(wǎng)對(duì)于$watch()的解釋，$watch()還有第三個(gè)參數(shù)，第三個(gè)參數(shù)是一個(gè)布爾類(lèi)型，表示是否深度監(jiān)聽(tīng)，深度監(jiān)聽(tīng)的例子就是是否進(jìn)行比較對(duì)象的屬性。

這樣我們就可以實(shí)現(xiàn)一次監(jiān)聽(tīng)多個(gè)值的變化。

示例代碼

var app=angular.module("watchApp",[])
      .controller("watchController",["$scope",function($scope){
         $scope.object={};
         $scope.object.one=$scope.one;
         $scope.object.one=$scope.one;
         $scope.$watch("object",function(){
            .....
          },true);
      }])

總結(jié)

以上就是關(guān)于AngularJS如何一次監(jiān)聽(tīng)多個(gè)值發(fā)生變化的全部?jī)?nèi)容，大家都學(xué)會(huì)了嗎？希望這篇文章的內(nèi)容對(duì)大家的學(xué)習(xí)和工作能有所幫助，如果有疑問(wèn)可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: