随笔- 1793 文章- 1 评论- 61 阅读- 298万

Unbinding $watch() Listeners In AngularJS

原文： 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 raw unbind-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.

posted @ 2018-05-30 16:37 立志做一个好的程序员阅读(217) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

历史上的今天：
2015-05-30 好的资源

公告

侧边栏

这里可以放什么呢？

昵称：立志做一个好的程序员
园龄： 11年4个月
粉丝： 108
关注： 269

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

文章档案

2017年9月(1)

相册

背景图(2)

好好爱自己！

牛顿的小脑

Unbinding $watch() Listeners In AngularJS

Unbinding $watch() Listeners In AngularJS

公告

侧边栏

这里可以放什么呢？

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

文章档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

不断学习创作，与自己快乐相处

	<!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>