zoukankan      html  css  js  c++  java
  • 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 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.

  • 相关阅读:
    JQuery操作Javascript对象和数组的工具函数总览
    .document.execCommand("BackgroundImageCache",false,true)解决ie6下的背景图片缓存问题
    jQuery boxy弹出层对话框插件中文演示及讲解
    纯客户端页面关键字搜索高亮jQuery插件
    Android游戏开发中地图图层开发
    第一次开通博客
    C#下的Config类, 支持Get, Set, GetList
    输出N以内素数的方法
    使用 googleperftools 剖析程序性能瓶颈
    在网页设计中寻找热情
  • 原文地址:https://www.cnblogs.com/oxspirt/p/9111729.html
Copyright © 2011-2022 走看看