一.前言
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
相关推荐
本篇文章主要介绍了深究AngularJS——ng-checked(回写:带真实案例代码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本篇文章主要介绍了深究AngularJS中$sce的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
NULL 博文链接:https://bijian1013.iteye.com/blog/2392443
本篇文章主要介绍了深究AngularJS之ui-router详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本篇文章主要介绍了深究AngularJS中ng-drag、ng-drop的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本篇文章主要介绍了AngularJS如何获取input的焦点(自定义指令),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
指向深度学习的高中化学事实性知识内涵深究及教学建议——以“钠及其化合物”为例.pdf
中亚塔拉斯-费尔干纳断裂现今的走滑速率及其分段变化特征——基于GPS观测的深究.pdf
为了更好的明了接地的技巧方法,下文中将不再讲究任何的文字技巧,而是一针见血的道出接地问题的本质来。
资源名称:Android 安全架构深究内容简介:《Android 安全架构深究》自底向上描述了Android 的安全架构,深入探究与安全相关的Android 子系统、设备和数据组件的内部实现。其中包括包和用户管理,权限和设备策略,...
20210204-东吴证券-商业贸易行业中国品牌化崛起系列深度(一):深究“品牌溢价”的来源,万元奢侈品包成本是多少?.pdf
中国品牌化崛起系列深度(一):深究“品牌溢价”的来源-万元奢侈品包成本是多少?.pdf
ANDROID安全架构深究.pdf ANDROID安全架构深究.pdf ANDROID安全架构深究.pdf
深究动画精神家园.doc