AngularJS中watch監(jiān)聽(tīng)用法分析
本文實(shí)例講述了AngularJS中watch監(jiān)聽(tīng)用法。分享給大家供大家參考，具體如下：
ANGULAR 監(jiān)聽(tīng)使用：
當(dāng)angular數(shù)據(jù)模型發(fā)生變化時(shí)，我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。
$watch是一個(gè)scope函數(shù)，用于監(jiān)聽(tīng)模型變化，當(dāng)你的模型部分發(fā)生變化時(shí)它會(huì)通知你。
$watch(watchExpression, listener, objectEquality);
| watchExpression | 需要監(jiān)控的表達(dá)式 |
| listener | 處理函數(shù)，函數(shù)參數(shù)如下 function(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)該使用它 |
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
$scope.name = "Angular";
$scope.updated = -1;
$scope.$watch('name', function(newValue, oldValue) {
if (newValue === oldValue) { return; } // AKA first run
$scope.updated++;
});
var i=0;
$scope.getScope=function(){
// console.info(this);
var obj=$("#btnTest");
i++;
angular.element( obj).scope().name="hello" +i;
}
});
</script>
<body ng-controller="MainCtrl">
<input ng-model="name" />
Name updated: {{updated}} times.
<button id="btnTest" ng-click="getScope()">獲取scope</button>
</body>
</html>
此代碼監(jiān)控$scope的name值的變化，如果發(fā)生變化則觸發(fā)監(jiān)聽(tīng)。
監(jiān)控對(duì)象：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
$scope.user = { name: "Fox" };
$scope.updated = -1;
var watch=$scope.$watch('user', function(newValue, oldValue) {
if (newValue === oldValue) { return; }
$scope.updated++;
$scope.$broadcast('userUpdate', newValue.name);
});
//watch();
var i=0;
$scope.$on('userUpdate',function(d,data){
console.info(data);
})
$scope.getScope=function(){
// console.info(this);
var obj=$("#btnTest");
i++;
angular.element( obj).scope().user.name="hello" +i;
}
});
</script>
<body ng-controller="MainCtrl">
<input ng-model="user.name" />
Name updated: {{updated}} times.
<button id="btnTest" ng-click="getScope()">獲取scope</button>
</body>
</html>
這里我們點(diǎn)擊按鈕會(huì)發(fā)現(xiàn)監(jiān)控并不會(huì)觸發(fā)，原因是我們監(jiān)控了user對(duì)象，這個(gè)user對(duì)象沒(méi)喲發(fā)生變化，只不過(guò)屬性值發(fā)生了變化。
如果我們希望監(jiān)控user對(duì)象屬性發(fā)生變化，有兩個(gè)做法。
1.使用深度監(jiān)控。
方法如下：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
$scope.user = { name: "Fox" };
$scope.updated = -1;
var watch=$scope.$watch('user', function(newValue, oldValue) {
if (newValue === oldValue) { return; }
$scope.updated++;
$scope.$broadcast('userUpdate', newValue.name);
},true);
//watch();
var i=0;
$scope.$on('userUpdate',function(d,data){
console.info(data);
})
$scope.getScope=function(){
// console.info(this);
var obj=$("#btnTest");
i++;
angular.element( obj).scope().user.name="hello" +i;
}
});
</script>
<body ng-controller="MainCtrl">
<input ng-model="user.name" />
Name updated: {{updated}} times.
<button id="btnTest" ng-click="getScope()">獲取scope</button>
</body>
</html>
設(shè)置為深度監(jiān)控，只要對(duì)象發(fā)生變化，那么監(jiān)聽(tīng)就會(huì)觸發(fā)。
2.直接寫對(duì)象的屬性值路徑。
var watch=$scope.$watch('user.name', function(newValue, oldValue) {
//具體代碼就不全部寫了。
消除監(jiān)聽(tīng)
系統(tǒng)中太多的監(jiān)聽(tīng)會(huì)影響系統(tǒng)的性能，我們可以在滿足某些條件后，去掉監(jiān)聽(tīng)。
去掉監(jiān)聽(tīng)方法如下：
var watch=$scope.$watch('user', function(newValue, oldValue) {
if (newValue === oldValue) { return; }
$scope.updated++;
$scope.$broadcast('userUpdate', newValue.name);
},true);
//去掉監(jiān)聽(tīng)。
watch();
在系統(tǒng)中使用事件廣播。
比如在監(jiān)聽(tīng)時(shí)，我們對(duì)外廣播一個(gè)事件，
在控制其中寫監(jiān)聽(tīng)的處理方法：
實(shí)例如下：
$scope.$broadcast('userUpdate', newValue.name);
監(jiān)聽(tīng)代碼：
$scope.$on('userUpdate',function(d,data){
console.info(data);
})
這種做法最好使用在指令中，指令中廣播事件，在控制器中實(shí)現(xiàn)監(jiān)聽(tīng)。好處在于實(shí)現(xiàn)代碼的重用。
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
本文主要介紹AngularJS環(huán)境設(shè)置,學(xué)習(xí)AngularJS的朋友肯定要設(shè)置開(kāi)發(fā)軟件的環(huán)境,這里詳細(xì)介紹安裝設(shè)置流程，有需要的朋友可以參考下2016-08-08
Angular懶加載模塊與Combined?Injector原理全面解析
這篇文章主要為大家介紹了Angular懶加載模塊與Combined?Injector原理全面解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
利用Angularjs中模塊ui-route管理狀態(tài)的方法
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來(lái)管理狀態(tài)的方法,文中通過(guò)示例代碼介紹的很詳細(xì)，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友可以一起來(lái)學(xué)習(xí)學(xué)習(xí)。2016-12-12![解決angular2在雙向數(shù)據(jù)綁定時(shí)[(ngModel)]無(wú)法使用的問(wèn)題](http://img.jbzj.com/images/xgimg/bcimg3.png)
解決angular2在雙向數(shù)據(jù)綁定時(shí)[(ngModel)]無(wú)法使用的問(wèn)題
今天小編就為大家分享一篇解決angular2在雙向數(shù)據(jù)綁定時(shí)[(ngModel)]無(wú)法使用的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Angular2-primeNG文件上傳模塊FileUpload使用詳解
這篇文章主要為大家詳細(xì)介紹了Angular2-primeNG文件上傳模塊FileUpload使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
AngularJS之頁(yè)面跳轉(zhuǎn)Route實(shí)例代碼
本篇文章主要介紹了AngularJS之頁(yè)面跳轉(zhuǎn)Route ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開(kāi)始先進(jìn)行了簡(jiǎn)單的介紹，而后通過(guò)完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12
詳解Angular4中路由Router類的跳轉(zhuǎn)navigate
這篇文章主要介紹了詳解Angular4中路由Router類的跳轉(zhuǎn)navigate，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Angularjs 實(shí)現(xiàn)動(dòng)態(tài)添加控件功能
這篇文章主要介紹了Angularjs 實(shí)現(xiàn)動(dòng)態(tài)添加控件功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-05-05
本篇文章主要介紹了深究AngularJS中$sce的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06