浅谈angularJS的$watch失效问题的解决方案

本文介绍了浅谈angularJS的$watch失效问题的解决方案,分享给大家,顺便给自己留个笔记

$watch方法,它可以帮助我们在每个scope中监视其中的变量。

$watch 单一的变量

对于普通的变量时,如数字,字符串等,直接如下写是可以监视到变量的变化,并执行相应的函数的。

$scope.count=1;
$scope.$watch('count',function(){
...
});

$watch 多个变量

对于多个变量的监视变化,执行同一函数的话,可以将这几个变量转为字符串,以‘+'号隔开来进行监视

//当count或page变化时,都会执行这个匿名函数
$scope.count=1;
$scope.page=1;
$scope.$watch('count + page',function(){
...
});

$watch对象或数组

发现用上面两种方法去监视数组时,会发现即使数组的内容改变了,也没有触发到这个匿名函数。之后发现watch函数其实是有三个变量的,第一个参数是需要监视的对象,第二个参数是在监视对象发生变化时需要调用的函数,实际上watch还有第三个参数,它在默认情况下是false。

当第三个参数是false时,其实watch函数监视的是数组的地址,而数组的内容的变化不会影响数组地址的变化,所以watch函数失灵了。

解决办法,就是在后面添加第三个参数为true就好(当然,也可以将这监听返回结果为JSON字符串形式的该对象或数组的的匿名函数。)

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch('items',function(){...},true);

或者将监听返回结果为JSON字符串形式的该对象或数组的的匿名函数

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch(function(){
  return JSON.stringify($scope.items);
},function(){...});

$watch 函数的返回结果

在写代码的时候,有时会遇到要监视一个函数返回的结果是否变化的情况,所以查了一下$watch 监视函数的情况。

方法1:监视对象为“函数名()”的字符串,记得加“()”!

//未完成的任务个数
$scope.unDoneCount = function() {
  var count = 0;
  angular.forEach($scope.todoList, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};
//单选影响全选部分
$scope.$watch('unDoneCount()', function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

方法2:在监视对象中设置为匿名函数,返回要监视的函数的返回值(绕晕了…)

$scope.$watch(function(){
  return $scope.unDoneCount();//不要忘了(),要执行的啊~
}, function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

取消$watch

watch的性能消耗好像蛮大的,所以对于已经不需要监视的watch,记得定时取消掉。

至于怎么取消了…查了好久才找到的

其实每个watch函数返回的结果就是这个watch的deregisterWatch()函数

//在chrome的控制台上,断点得到的$watch的返回值
function deregisterWatch() {
  arrayRemove(array, watcher);
  lastDirtyWatch = null;
}

所以啊,要取消watch的话,一开始将$watch的返回值保存就好啦,要取消watch的时候,在调用。

var count=1;
var unbingWatch=$scope.$watch('todoList',function(){
  console.log('todoList change');
  count++;
  //相当于在todoList变化了4次之后,就调用unbingWatch()取消这个watch
  //在第5次todoList改变的时候,就不会输出todoList change了。
  if(count>4){
    unbingWatch();
  }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-08-10

Angular中的$watch、$watchGroup、$watchCollection

•  1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}: •  2,参数:watchExp(必须):{(function()|string)},可以字符串表达式,也可以带当前scope为参数的函数 • - `string`: Evaluated as {@link guide/expression expression} • - `function(scope)`: called

AngularJS中的$watch(),$digest()和$apply()区分

AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数. 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个"Watch"."Watch"用于监听AngularJS scope中变量的改变.可以通过调用$scope.$watch()这个方法来创建"Watch". $scope.$digest()函数会循环访问

Angular中使用$watch监听object属性值的变化(详解)

Angular中的$watch可以监听属性值的变化,然后并做出相应处理. 常见用法: $scope.$watch("person", function(n, o){ //todo something... }) 但是对于一个对象中的某个属性值变化时,$watch似乎不管用了. 示例代码: <body> <div ng-controller="mainCtrl"> <input id="myText" type=&qu

浅谈Angular.js中使用$watch监听模型变化

$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

AngularJS中$apply方法和$watch方法用法总结

本文实例总结了AngularJS中$apply方法和$watch方法用法.分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQue

angular $watch 一个变量的变化(实例讲解)

废话不多说,直接上代码 $scope.$watch('custArea', function(newValue, oldValue) { angular.forEach(newValue, function(item, key) { if($scope.custArea.indexOf("000000") > -1){ // $scope.toastWarn("已选择中国大陆所有省市,其他值不可选"); $scope.custArea =["0000

AngularJS中watch监听用法分析

本文实例讲述了AngularJS中watch监听用法.分享给大家供大家参考,具体如下: ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); watchExpression 需要监控的表达式 listener 处理函数,函数参数如下  function

关于angular js_$watch监控属性和对象详解

$Watch:(监听一个model,当一个model每次改变时,都会触发第二个函数) $watch('watchFn',watchAction,deepWatch) watchFn:带有Angular 表达式或者函数的字符串,它会返回被监控的数据模型的当前值. watchAction: 一个函数function(newValue,oldValue){},当watchFn 发生变化时会被调用 deepWatch:默认为false,监听数组的某个元素或者对象的属性时设置为true; 监控一个属性:

基于js对象,操作属性、方法详解

一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很

Java 用反射设置对象的属性值实例详解

Java 用反射设置对象的属性值实例详解 /** * 用反射设置对象的属性值 * @param obj 需要設置值的對象 * @param fieldName 需要設置值的屬性 * @param value 需要设置的值 * @return 设置值后的对象 */ private Object invoke(Object obj, String fieldName, Object value) { String firstWord = fieldName.substring(0, 1).toUpp

Python对象的属性访问过程详解

只想回答一个问题: 当编译器要读取obj.field时, 发生了什么? 看似简单的属性访问, 其过程还蛮曲折的. 总共有以下几个step: 1. 如果obj 本身(一个instance )有这个属性, 返回. 如果没有, 执行 step 2 2. 如果obj 的class 有这个属性, 返回. 如果没有, 执行step 3. 3. 如果在obj class 的父类有这个属性, 返回. 如果没有, 继续执行3, 直到访问完所有的父类. 如果还是没有, 执行step 4. 4. 执行obj.__ge

Spark三种属性配置方式详解

随着Spark项目的逐渐成熟, 越来越多的可配置参数被添加到Spark中来.在Spark中提供了三个地方用于配置: 1.Spark properties:这个可以控制应用程序的绝大部分属性.并且可以通过 SparkConf对象或者Java 系统属性进行设置: 2.环境变量(Environment variables):这个可以分别对每台机器进行相应的设置,比如IP.这个可以在每台机器的$SPARK_HOME/ conf/spark-env.sh脚本中进行设置: 3.日志:所有的日志相关的属性可以

JavaScript浏览器对象之一Window对象详解

JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制.JavaScript中定义了6种重要的对象: window对象 表示浏览器中打开的窗口: document对象 表示浏览器中加载页面的文档对象: location对象包含了浏览器当前的URL信息: navigation对象 包含了浏览器本身的信息: screen对象 包含了客户端屏幕及渲染能力的信息: history对象 包含了浏览器访问网页的历史信息. 除了window对象之外,其他的5个对象都是windo

Angular指令之restict匹配模式的详解

Angular指令之restict匹配模式的详解 <body data-ng-app="myapp"> <runn2></runn2> <div data-runn2></div> <div class="runn2"></div> <!-- directive: runn2 --> <script> var app=angular.module("

python类:class创建、数据方法属性及访问控制详解

在Python中,可以通过class关键字定义自己的类,然后通过自定义的类对象类创建实例对象. python中创建类 创建一个Student的类,并且实现了这个类的初始化函数"__init__": class Student(object):     count = 0     books = []     def __init__(self, name):         self.name = name 接下来就通过上面的Student类来看看Python中类的相关内容. 类构造和

jQuery操作属性和样式详解

• 区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id,src,alt等叫做这个元素的"属性".我们将其称为"元素属性".但是在解析成 DOM 对象时,实际浏览器最后会将标签元素解析成"DOM 对象",

JavaScript——DOM操作——Window.document对象详解

一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunment.getElementById("id");将找到的元素放在变量中:     docunment.getElementsByName("name"):根据name找,找出来的是数组:     docunment.getElementsByTagName("name"):根据标签名找,找