打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
深究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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

监听多个数据的写法

两种:
1.用+连接起来:$scope.$watch('obj.name+obj.age');
2.放进一个数组或对象中后,将第三个参数设为true,如:$scope.$watch('obj',function(){},true);

使用watch的注意事项

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Angular.js中使用$watch监听模型变化
javascript – Angular手表并不总是有效
实践总结
(译) Angular运行原理揭秘 Part 1 | AngularJS中文社区
ionic之AngularJS(十)
走进AngularJs(五)自定义指令
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服