當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
深究AngularJS——监听模型$watch
生活随笔
收集整理的這篇文章主要介紹了
深究AngularJS——监听模型$watch
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前言
1.$watch是scope內置的函數(shù)，它的作用是用來監(jiān)聽數(shù)據的變化。
2.$watch可監(jiān)聽哪些數(shù)據？
單個對象的屬性
需要計算的結果（函數(shù)）
3. 語法: $scope.$watch(F,M,B);
對$watch參數(shù)的了解
F：
要監(jiān)聽的數(shù)據（表達式或函數(shù)的字符串），主要是監(jiān)聽這些數(shù)據改變沒有。它會返回被監(jiān)聽數(shù)據的當前值。
M：
當監(jiān)聽的數(shù)據發(fā)生變化時，就會調用M（它是函數(shù)或表達式）。如果是函數(shù)形多，則會接收到F的新舊兩個值和作用域對象，示例：
$scope.$watch("formData",function(newValue,oldValue, scope) {//這里是監(jiān)聽的數(shù)據發(fā)生變化后調用//formData是$scope.formData={};里的}}, true);B：
為true時：將會檢查監(jiān)聽對象的每個屬性是否發(fā)生變化。適用于監(jiān)聽數(shù)組或者監(jiān)聽的是一個對象上的所有屬性。由于每次都要遍歷監(jiān)聽對象的值是否發(fā)生變化，如果數(shù)組值過多，或對象屬性多，那么一點點改變就會造成大量的遍歷。
監(jiān)聽一個函數(shù)的寫法
<body><div ng-app="myApp" ng-controller="control"><input type="text" set-Focus ng-blur="setBlur()"><button ng-click="getFocus()">獲取焦點</button></div> <script type="text/javascript"> //模型var app = angular.module('myApp',[]);//控制器app.controller("control",function($scope){$scope.isFocus = false;//監(jiān)聽的函數(shù)，須返回當前值$scope.method = function(){return $scope.isFocus;}//點擊獲得焦點操作$scope.getFocus = function(){$scope.isFocus = true;$scope.method();};//失去點后，賦值為false可再次點擊獲得焦點$scope.setBlur = function(){$scope.isFocus = false;}});//自定義指令app.directive('setFocus',[ function(){return {link:function(scope, element){ //監(jiān)聽的數(shù)據是一個函數(shù)，該函數(shù)必須先在父作用域定義scope.$watch(scope.method,function(newValue,oldValue, scope) {if(newValue&& !oldValue){element[0].focus(); //獲取焦點 }}, true);;}};}]);</script> </body>監(jiān)聽多個數(shù)據的寫法
兩種：
1.用+連接起來：$scope.$watch('obj.name+obj.age');
2.放進一個數(shù)組或對象中后，將第三個參數(shù)設為true，如:$scope.$watch('obj',function(){},true);
使用watch的注意事項
總結
以上是生活随笔為你收集整理的深究AngularJS——监听模型$watch的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 面向对象（下）知识点
- 下一篇： 深究AngularJS——下拉框（sel