Angular中使用$watch監(jiān)聽object屬性值的變化(詳解)
Angular中的$watch可以監(jiān)聽屬性值的變化，然后并做出相應(yīng)處理。
常見用法：
$scope.$watch("person", function(n, o){
//todo something...
})
但是對(duì)于一個(gè)對(duì)象中的某個(gè)屬性值變化時(shí)，$watch似乎不管用了。
示例代碼：
<body>
<div ng-controller="mainCtrl">
<input id="myText" type="text" ng-model="person.name"/>
<h2>{{person}}</h2>
<h2>Status: {{status}}</h2>
</div>
<script>
angular.module('myApp', [])
.controller('mainCtrl', function ($scope) {
$scope.person = {
name:"allen",
age:21
}
$scope.$watch("person", function(n, o){
//取消第一次加載時(shí)的監(jiān)聽響應(yīng)
if(n == o){
return;
}
$scope.status = "changed"
})
})
</script>
</body>
我們?yōu)檩斎肟蚪壎藀erson對(duì)象的name屬性，然而當(dāng)我們改變輸入框的值時(shí)候，{{person}}確實(shí)改變了，然而并沒有出現(xiàn)我們想要的change字符。
效果：
我們需要為$watch方法額外添加一個(gè)true參數(shù)，使之達(dá)到我們想要的效果：
$scope.$watch("person", function(n, o){
if(n == o){
return;
}
$scope.status = "changed";
},true)
$watch方法完整的使用方式是這樣的：
$watch(watchExpression, [listener], [objectEquality]);
第一個(gè)是監(jiān)聽的參數(shù)名稱，剩下兩個(gè)可選參數(shù)分別為處理函數(shù)和是相等比較的方式，對(duì)于后者文檔如是說：Compare for object equality using angular.equals instead of comparing for reference equality. 即是否使用angular.equals方法進(jìn)行比較。
如此效果變?yōu)椋?/strong>
以上這篇Angular中使用$watch監(jiān)聽object屬性值的變化(詳解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了AngularJS Phonecat實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了詳解Angular5 路由傳參的3種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
簡介AngularJS中使用factory和service的方法
這篇文章主要簡單介紹了AngularJS中使用factory和service的方法,主要針對(duì)自定義工廠和服務(wù)的創(chuàng)建來講,需要的朋友可以參考下2015-06-06
本文主要介紹AngularJS ng-href 指令,這里對(duì)ng-href 基礎(chǔ)資料進(jìn)行詳細(xì)介紹,并附代碼實(shí)例,有興趣的小伙伴可以參考下2016-08-08
對(duì)angularJs中ng-style動(dòng)態(tài)改變樣式的實(shí)例講解
今天小編就為大家分享一篇對(duì)angularJs中ng-style動(dòng)態(tài)改變樣式的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
angular學(xué)習(xí)之ngRoute路由機(jī)制
這篇文章主要介紹了angular學(xué)習(xí)之ngRoute路由機(jī)制，ngRoute是一個(gè)Module，提供路由和深層鏈接所需的服務(wù)和指令。有需要的可以了解一下。2017-04-04
AngularJS 最常用的八種功能(基礎(chǔ)知識(shí))
這篇文章主要介紹了AngularJS 最常用的八種功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-06-06
單頁應(yīng)用中，組件時(shí)構(gòu)建應(yīng)用的基礎(chǔ)元素，頁面展示什么內(nèi)容均是靠頁面有什么組件決定的，而展示什么組件又是由一組路由（帶有Url元素的特定集合，可用于導(dǎo)航視圖）決定的，希望本文可以幫助讀者了解路由的基礎(chǔ)概念和基礎(chǔ)使用、寫法。2021-05-05
AngularJS基礎(chǔ) ng-options 指令詳解
本文主要介紹AngularJS ng-options 指令,這里對(duì)ng-options指令的知識(shí)做了詳細(xì)整理,并附有詳細(xì)的代碼示例,有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了AngularJS中的過濾器filter用法,包括Angular中一些常用的自帶的過濾器的列舉以及自定義filter的方法,需要的朋友可以參考下2016-04-04