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 ...
随机推荐
- 刷新iframe
<button onclick="document.getElementById('frame').contentWindow.location.reload(true)"& ...
- swf自动播放时如何全屏全部显示
在QQ Show里面看到一个很可爱的挂件,很想把它弄下来.弄下来的方法很简单,直接去网页缓存文件里面找.找到了之后,按下面的方法插入到网页中: 1 <object height="10 ...
- Flash Builder 4.7 完美破解
1. 准备安装文件和序列号生成器1Adobe Flash Builder 4.7 的安装文件可以从以下两个连接下载到:•32bit:http://trials3.adobe.com/AdobeProd ...
- 最简单的基于FFmpeg的AVDevice例子（读取摄像头）【转】
转自:http://blog.csdn.net/leixiaohua1020/article/details/39702113 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[- ...
- 如何使用python下载网站上的视频
youtube-dl 从名字上也能看出来,是专门用来下载YouTube的视频. 不过本人对YouTube不感兴趣,但是这个模块可以用来下载bilibili上的视频我们就来试一试 首先pip insta ...
- Mac下安装npm，http-server，安装虚拟服务器
http-server是一个简单的,不需要配置的命令行下使用的http服务器.类似的还有Xampp等. 针对前端开发工程的代码不需要编译的特点,使用这种简单的服务器十分的便利. 1.安装这个首先要安装 ...
- (20)C#泛型
泛型的定义:通过参数化类型来实现在同一份代码上操作多种数据类型.泛型编程时一种编程范式,它利用“参数化类型”将类型抽象化,从而实现更为灵活的复用. 优点: 1.省去了拆箱.装箱 2.提高安全性 3. ...
- Codeforces 581F Zublicanes and Mumocrates（树型DP）
题目链接 Round 322 Problem F 题意 给定一棵树,保证叶子结点个数为$2$(也就是度数为$1$的结点),现在要把所有的点染色(黑或白) 要求一半叶子结点的颜色为白,一半叶子结点的 ...
- Python的程序结构[0] -> 属性/Property[0] -> 类属性、实例属性和私有属性
类属性.实例属性和私有属性 Python中类的属性主要包括类属性,实例属性和私有属性,下面是对三种属性的简单介绍 类属性 / Class Property 类属性在__init__()之外初始化,在外 ...
- 洛谷——P1107 最大整数
P1107 最大整数 题目描述 设有n个正整数 (n<=20), 将它们连接成一排, 组成一个最大的多位整数. 例如: n=3时, 3个整数13, 312, 343连接成的最大整数为: 3433 ...