深究AngularJS——监听模型$watch
来源:互联网 发布:java时间戳计算 编辑:程序博客网 时间:2024/05/16 12:28
前言
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的注意事项
1 0
- 深究AngularJS——监听模型$watch
- angularjs $watch监听模型变化
- angularjs 用$watch监听模型变化
- 深究AngularJS——排序
- 深究AngularJS——$sce的使用
- 深究AngularJS——过滤器(filter)
- 深究AngularJS——ui-router详解
- 深究AngularJS——ui-router详解
- $watch--angularJs的监听事件
- 深究AngularJS——AngularJS中的Controller(控制器)
- Angularjs 利用 $on、$emit和$broadcast传值,利用$watch监听模型变化
- 深究AngularJS——下拉框(selected)
- 深究AngularJS——校验(非form表单)
- 深究AngularJS——自定义服务详解(factory、service、provider)
- 深究AngularJS——ng-drag、ng-drop
- 深究angularJS——(上传)FileUploader中文翻译
- 深究AngularJS——自定义服务详解(factory、service、provider)
- 深究AngularJS——自定义服务详解(factory、service、provider)
- 剑指offer之面试题28字符串的排列
- thrift系列 - harpc 基于thrift的轻量级rpc框架
- 绝对路径与相对路径
- Android数据存储五种方式总结
- linux的mysql权限错误导致看不到mysql数据库
- 深究AngularJS——监听模型$watch
- 打字第一次到良好
- mysql-5.7.12免安装版下载和配置
- python set(集合)数据结构
- 网店UI设计排版
- SpringMVC get请求乱码(Tomcat服务器)
- 实例讲解 继承封装多态(一)
- 有关popupwindow的动画效果
- Java开发常用的在线工具