前言

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 -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作.对于angularjs处理这类问题,最好的方式就是指令 directive. ...
java 注册监听_java注册监听模型
Java的Selector调用操作系统层的Multiplexing IO(多路复用模型),本身只是个API调用.而多路复用是这个样子的: I/O multiplexing 这里面的 multiplex ...
angularjs -- 路由监听
前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...
angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题
angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题参考文章: (1)angularjs路由监听,uirouter感知路由变化,解决uirouter路由 ...
angularjs中 $watch 和$on 2种监听的区别？
1.$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEq ...
angularjs $watch监听模型变化
$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...
jquery控制只监听数字_jQuery老矣，尚能饭否
发展历程 write less, do more -- John Resig 在2005年8月的某一天,有一位叫John Resig的美(guo)人,在blog上连发3个栗子公开怼了Prototyp ...
设备节点监听--走在 input 分析之前
在进行 Input 系统分析之前,先简单学习一下 Input 系统和 linux 交互的几个方法,因为 epoll 机制是 InputManagerServer 和 linux 设备节点交互的主要工具 ...
vue 存储对象不要监听_Vue源码解析----响应式原理
从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新 ...

深究AngularJS——监听模型$watch

前言

对$watch参数的了解

F：

M：

B：

监听一个函数的写法

监听多个数据的写法

使用watch的注意事项

深究AngularJS——监听模型$watch相关推荐

最新文章

热门文章