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