当前位置：
首页 >
前端技术
> javascript
>内容正文
javascript
深究AngularJS——监听模型$watch
生活随笔
收集整理的这篇文章主要介绍了
深究AngularJS——监听模型$watch
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
前言
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);B：
为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);
使用watch的注意事项
总结
以上是生活随笔为你收集整理的深究AngularJS——监听模型$watch的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 面向对象（下）知识点
- 下一篇： 深究AngularJS——下拉框（sel