原文： https://www.bennadel.com/blog/2480-unbinding-watch-listeners-in-angularjs.htm

-----------------------------------------------------------------------------

Unbinding $watch() Listeners In AngularJS

By Ben Nadel on June 5, 2013

In AngularJS, you can watch for changes in your view-model by binding a listener to a particular statement (or function) using the $scope's $watch() method. You tell the $watch() method what to examine and AngularJS will invoke your listener whenever the item-under-scrutiny changes. In the vast majority of cases, the $watch() statement can be run with a set-and-forget mentality. But, in rare cases, you may only want to $watch() for a single change; or, only watch for changes up to a certain point. If that's the case, you can unbind a $watch() listener using the provided "deregistration" function.

         
     
     

When you invoke the $watch() method, to create a binding, AngularJS returns a "deregistration" function. This function can then be used to unbind your $watch() listener - all you have to do is invoke this returned function and your $watch() listener will be removed.

To see this in action, take a look at the following code. In this demo, we're watching the number of clicks that a link receives. And, if that number gets above 5, we're going to show a message; however, once the message is shown, we remove the listener as it will no longer have any value.

  <!doctype html>
  <html ng-app="Demo" ng-controller="AppController">
  <head>
  <meta charset="utf-8" />
   
  <title>
  Unbinding $watch() Listeners In AngularJS
  </title>
  </head>
  <body>
   
  <h1>
  Unbinding $watch() Listeners In AngularJS
  </h1>
   
  <p>
  <a ng-click="incrementCount()">Click it, click it real good!</a>
  &raquo;
  {{ clickCount }}
  </p>
   
  <p ng-show="isShowingFeedback">
  <em>Heck yeah, now that's how you click a link!!</a>
  </p>
   
   
   
  <!-- Load jQuery and AngularJS from the CDN. -->
  <script
  type="text/javascript"
  src="//code.jquery.com/jquery-2.0.0.min.js">
  </script>
  <script
  type="text/javascript"
  src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
  </script>
  <script type="text/javascript">
   
   
  // Create an application module for our demo.
  var app = angular.module( "Demo", [] );
   
   
  // -------------------------------------------------- //
  // -------------------------------------------------- //
   
   
  // Define the root-level controller for the application.
  app.controller(
  "AppController",
  function( $scope ) {
   
  // I keep track of how many times the user has clicked
  // the link.
  $scope.clickCount = 0;
   
  // I determine if the "encouraging" feedback is shown.
  $scope.isShowingFeedback = false;
   
   
  // ---
  // WATCHERS.
  // ---
   
   
  // When you call the $watch() method, AngularJS
  // returns an unbind function that will kill the
  // $watch() listener when its called.
  var unbindWatcher = $scope.$watch(
  "clickCount",
  function( newClickCount ) {
   
  console.log( "Watching click count." );
   
  if ( newClickCount >= 5 ) {
   
  $scope.isShowingFeedback = true;
   
  // Once the feedback has been displayed,
  // there's no more need to watch the change
  // in the model value.
  unbindWatcher();
   
  }
   
  }
  );
   
   
  // ---
  // PUBLIC METHODS.
  // ---
   
   
  // I increment the click count.
  $scope.incrementCount = function() {
   
  $scope.clickCount++;
   
  // NOTE: You could just as easily have called a
  // counter-related method right here to test when
  // to show feedback. I am just demonstrating an
  // alternate approach.
   
  };
   
  }
  );
   
   
  </script>
   
  </body>
  </html>
view rawunbind-watch.htm hosted with ❤ by GitHub

As you can see, we're storing the function reference returned by the $watch() statement; then, once the $watch() fires a few times, we invoke that stored method, unbinding the $watch() listener. If you watch the video, you can see that the console.log() statements stop as soon as the "deregistration" function is called.

Most of the time, you won't need to use this. In fact, I only found out about this feature yesterday when I ran into a situation in which I needed to unbind the $watch() listener. That said, it turns out it's rather easy, as long as you know it's there.

Unbinding $watch() Listeners In AngularJS的更多相关文章

  1. AngularJS 源码分析2

    上一篇地址 本文主要分析RootScopeProvider和ParseProvider RootScopeProvider简介 今天这个rootscope可是angularjs里面比较活跃的一个pro ...

  2. [译]AngularJS $apply, $digest, 和$evalAsync的比较

    原文:The differences between AngularJS $apply, $digest, and $evalAsync 你是不是也常在想AngularJS $apply, $dige ...

  3. Angularjs 双向绑定机制解析

    文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...

  4. angularjs 指令（directive）详解(1)

    原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...

  5. Speeding up AngularJS apps with simple optimizations

    AngularJS is a huge framework with that already has many performance enhancements built in, but they ...

  6. 转:在控制台中调试AngularJS应用

    在控制台中调试AngularJS应用 在创建AngularJS应用时,一个很棘手的问题是如何在Chrome,Firefox,以及IE的JavaScript控制台中访问深藏在应用中的数据和服务.本文将会 ...

  7. AngularJS 3

    AngularJS 源码分析3 本文接着上一篇讲 上一篇地址 回顾 上次说到了rootScope里的$watch方法中的解析监控表达式,即而引出了对parse的分析,今天我们接着这里继续挖代码. $w ...

  8. angularJS 系列（七）---指令

    ----------------------------------------------------------------------------------- 原文:https://www.s ...

  9. 深入理解AngularJs－scope（一）

    进入正文前的说明:本文中的示例代码并非AngularJs源码,而是来自书籍<<Build Your Own AngularJs>>, 这本书的作者仅依赖jquery和lodas ...

随机推荐

  1. 洛谷 P4514 上帝造题的七分钟 解题报告

    P4514 上帝造题的七分钟 题目背景 裸体(裸题)就意味着身体(神题). 题目描述 "第一分钟,X说,要有矩阵,于是便有了一个里面写满了\(0\)的\(n \times m\)矩阵. 第二 ...

  2. HDU 1054树形DP入门

    Strategic Game Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. Yum只更新安全补丁的方法

    当大家想只给RHEL系统更新安全补丁的时候,往往会把其他一些无用的组件给更新下来,现在就给大家说下怎么只更新安全补丁而又不更新其他组件. 1.安装yum插件即可:   yum install yum- ...

  4. getElementsByName

    name属性,name属性是input标签的内建属性,早期浏览器的getElementsByName方法是为了方便的获取用户的输入.由于name只是input的内建属性,其它标签没有,所以getEle ...

  5. html模板引擎jade的使用

    jade语法: #{xxx} //嵌入数据 p= xxx //嵌入数据 p #{xx} //嵌入数据 标签 html // 翻译为<html></html> div#test ...

  6. 【CF1017F】The Neutral Zone（Bitset，埃氏筛）

    题意: 思路:From https://blog.csdn.net/CSDNjiangshan/article/details/81536536 #include<cstdio> #inc ...

  7. cms .net webform去服务器控件标签化 pagebase新版本

    这是最近在干一个webform的cms的时候用起来的,原来虽然做过很多技术,什么remoting,wcf,webservice,可是弄来弄去,最后也没个收藏的地儿,全都放在笔记本儿上了,可是人又懒地可 ...

  8. Objective-C类族和工厂模式

    http://www.cocoachina.com/ios/20141124/10296.html 相信大家都了解GoF的<Design Patterns>中提到的23种设计模式,其中将常 ...

  9. python中函数和生成器的运行原理

    #!/usr/bin/env python # -*- coding:utf-8 -*- # author:love_cat # python的函数是如何工作的 # 比方说我们定义了两个函数 def ...

  10. 将log4j2的配置文件log4j2.xml拆分成多个xml文件

    在日常的项目开发中,我们可能会使用log4j2分离系统日志与业务日志 ,这样一来,log4j2.xml 这个配置文件可能就会变得非常臃肿.庞大,那么我们可以将这个文件拆分成多个配置文件吗? 答案是肯定 ...