1.$watch
是scope内置的函数,它的作用是用来监听数据的变化。
2.$watch
可监听哪些数据?
单个对象的属性
需要计算的结果(函数)
3. 语法: $scope.$watch(F,M,B);
要监听的数据(表达式或函数的字符串),主要是监听这些数据改变没有。它会返回被监听数据的当前值。
当监听的数据发生变化时,就会调用M(它是函数或表达式)。如果是函数形多,则会接收到F的新旧两个值和作用域对象,示例:
$scope.$watch("formData",function(newValue,oldValue, scope) { //这里是监听的数据发生变化后调用 //formData是$scope.formData={};里的 } }, true);
为true时:将会检查监听对象的每个属性是否发生变化。适用于监听数组或者监听的是一个对象上的所有属性。由于每次都要遍历监听对象的值是否发生变化,如果数组值过多,或对象属性多,那么一点点改变就会造成大量的遍历。
<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; //监听的函数,须返回当前值 $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);; } }; }]);</script></body>
两种:
1.用+连接起来:$scope.$watch('obj.name+obj.age');
2.放进一个数组或对象中后,将第三个参数设为true,如:$scope.$watch('obj',function(){},true);
联系客服