深究AngularJS——监听模型$watch 冷不防 2022-04-06 10:54 226阅读 0赞 **一.前言** 1.$watch是scope内置的函数,它的作用是用来监听数据的变化。 2.$watch可监听哪些数据? 单个对象的属性 需要计算的结果(函数) 3. 语法: $scope.$watch(F,M,B); **二.对$watch参数的了解** F:要监听的数据(表达式或函数的字符串),主要是监听这些数据改变没有。它会返回被监听数据的当前值。 M:当监听的数据发生变化时,就会调用M(它是函数或表达式)。如果是函数形多,则会接收到F的新旧两个值和作用域对象,示例: $scope.$watch("formData",function(newValue,oldValue, scope) { //这里是监听的数据发生变化后调用 //formData是$scope.formData={};里的 } }, true); 为true时:将会检查监听对象的每个属性是否发生变化。适用于监听数组或者监听的是一个对象上的所有属性。由于每次都要遍历监听对象的值是否发生变化,如果数组值过多,或对象属性多,那么一点点改变就会造成大量的遍历。 **三.监听一个函数的写法** <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>angularJS watch</title> </head> <body> <div ng-app="myApp" ng-controller="control"> <input type="text" set-Focus ng-blur="setBlur()"> <button ng-click="getFocus()">获取焦点</button> </div> </body> <script src="jquery-1.8.3.js"></script> <script src="angular1.2.9.js"></script> <script src="app.js"></script> </html> app.js //模型 var app = angular.module('myApp',[]); //控制器 app.controller("control",function($scope){ $scope.isFocus = false; //监听的函数,须返回当前值 $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){ //监听的数据是一个函数,该函数必须先在父作用域定义 scope.$watch(scope.method,function(newValue,oldValue, scope) { if(newValue&& !oldValue){ element[0].focus(); //获取焦点 } }, true);; } }; }]); **四.监听多个数据的写法** 两种: 1.用+连接起来:$scope.$watch('obj.name+obj.age'); 2.放进一个数组或对象中后,将第三个参数设为true,如:$scope.$watch('obj',function()\{\},true); 文章来源:[http://blog.csdn.net/zcl\_love\_wx/article/details/51383548][http_blog.csdn.net_zcl_love_wx_article_details_51383548] [http_blog.csdn.net_zcl_love_wx_article_details_51383548]: http://blog.csdn.net/zcl_love_wx/article/details/51383548
还没有评论,来说两句吧...