Unbinding $watch() Listeners In AngularJS
原文： https://www.bennadel.com/blog/2480-unbinding-watch-listeners-in-angularjs.htm
-----------------------------------------------------------------------------
Unbinding $watch() Listeners In AngularJS
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> | |
| » | |
| {{ 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> |
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的更多相关文章
- AngularJS 源码分析2
上一篇地址 本文主要分析RootScopeProvider和ParseProvider RootScopeProvider简介 今天这个rootscope可是angularjs里面比较活跃的一个pro ...
- [译]AngularJS $apply, $digest, 和$evalAsync的比较
原文:The differences between AngularJS $apply, $digest, and $evalAsync 你是不是也常在想AngularJS $apply, $dige ...
- Angularjs 双向绑定机制解析
文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...
- angularjs 指令（directive）详解(1)
原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...
- Speeding up AngularJS apps with simple optimizations
AngularJS is a huge framework with that already has many performance enhancements built in, but they ...
- 转:在控制台中调试AngularJS应用
在控制台中调试AngularJS应用 在创建AngularJS应用时,一个很棘手的问题是如何在Chrome,Firefox,以及IE的JavaScript控制台中访问深藏在应用中的数据和服务.本文将会 ...
- AngularJS 3
AngularJS 源码分析3 本文接着上一篇讲 上一篇地址 回顾 上次说到了rootScope里的$watch方法中的解析监控表达式,即而引出了对parse的分析,今天我们接着这里继续挖代码. $w ...
- angularJS 系列（七）---指令
----------------------------------------------------------------------------------- 原文:https://www.s ...
- 深入理解AngularJs－scope（一）
进入正文前的说明:本文中的示例代码并非AngularJs源码,而是来自书籍<<Build Your Own AngularJs>>, 这本书的作者仅依赖jquery和lodas ...
随机推荐
- HTTP协议中GET、POST和HEAD的介绍
HTTP协议中GET.POST和HEAD的介绍 GET: 请求指定的页面信息,并返回实体主体. HEAD: 只请求页面的首部. POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体 ...
- 【IDEA】IDEA断点调试与清除断点
有时候我们必须启动debug模式来进行调试,在IDEA中断点调试与Eclipse大致相同: 1.以debug模式启动服务器: 2.在需要打断点的那一行前面点击一下标记上红点则是有断点,再次点击可以清除 ...
- [9018_1563][bzoj_2144]跳跳棋
题目描述 Hzwer的跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子. 某一天,黄金大神和cjy用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在a,b,c这三个位置.他们 ...
- windows实时监测热插拔设备的变化（转）
原文转自 https://blog.csdn.net/windows_nt/article/details/13614849 序: 在21世纪,这个信息时代,热插拔设备是一个巨大的安全隐患.在这个篇文 ...
- （未解决）WIN8下使用POWERSHELL安装python easy_install无法成功
按照https://pypi.python.org/pypi/setuptools#windows-8-powershell介绍的方法, 安装未成功.安装似乎没有启动, 也未安装成功. Windows ...
- 【linux高级程序设计】（第十五章）UDP网络编程应用 5
域名与IP信息解析 /etc/hosts 文件中有部分IP地址与域名主机名的信息 /etc/resolv.conf 里面有DNS服务器的IP地址 struct hostent { char *h_na ...
- c++和G++的区别
今天被g++坑死了.. 网上找了一段铭记:引自 http://www.cnblogs.com/dongsheng/archive/2012/10/22/2734670.html 1.输出double类 ...
- hdu 3790(SPFA)
最短路径问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- 通过字典传递django orm的filter功能
class AppRightManageListView(ListView): template_name = 'rightmanage/list_apprightmanage.html' # mod ...
- Netty源码学习（零）前言
本系列文章将介绍Netty的工作机制,以及分析Netty的主要源码. 基于的版本是4.1.15.Final(2017.08.24发布) 水平有限,如有谬误请留言指正 参考资料 the_flash的简书 ...