DEMO

Question

点击开始观看，我会在输入栏上多次开火。现在我想逐个删除输入字段上的手表。我该怎么做？

(function(angular) {
  'use strict';
  angular.module('docsBindExample', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.name = 'Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)';

      $scope.test = "";
      $scope.cntr = 0;    /* jsCode igonore other methods*/
      $scope.initWatch = function() {
        $scope.$watch('test', function(newValue, oldValue) {
          if (newValue !== oldValue)
            $scope.cntr++;
        });
      };

    }]);
})(window.angular);

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-directive-bind-production</title>

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="docsBindExample">  <!--html code-->
  <div ng-controller="Controller">
    <input type="text" ng-model="test" />

    <input type="button" value="start watch" ng-click="initWatch()" />   <!-- watch is called multiple times by clicking it-->

    <br/> Watch Counter: {{cntr}}   <!-- count displayed here -->

  </div>
</body>

</html>

<!-- 
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->     <!-- if version <Named Framework> [gte 2.0] -->
Content relevant to Named Framework versions 2.0 and greater.
<!-- end version if -->

Answer 1

使用ng-change directive：

，而不是使用观察者

<input type="text" ng-model="test" ng-change="watch()"/>
<input type="button" value="enable watch" ng-click="enableWatch()" />

使用enable标记：

，而不是添加和删除观察者

  $scope.enableWatch = function() {
      $scope.enable = ! $scope.enable;
  };
  $scope.watch = function() {
      if ($scope.enable) {
        $scope.cntr++;
      };
  };

添加和删除观察者的技术会产生一种难以查看且难以调试的隐式状态。应避免使用该技术。而是添加标志会创建一个易于查看且易于调试的状态。这遵循Separation of Concerns的设计原则，其中模型与视图及其观察者分开。

DEMO

＆＃13;

angular.module('docsBindExample', [])
  .controller('Controller', ['$scope', function($scope) {
      $scope.name = 'Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)';

      $scope.test = "";
      $scope.cntr = 0;    /* jsCode igonore other methods*/
      $scope.enableWatch = function() {
          $scope.enable = ! $scope.enable;
      };
      $scope.watch = function() {
          if ($scope.enable) {
            $scope.cntr++;
          };
      };

}]);

＆＃13;

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="docsBindExample">  <!--html code-->
  <div ng-controller="Controller">
    <input type="text" ng-model="test" ng-change="watch()"/>

    <input type="button" value="enable watch" ng-click="enableWatch()" />
    
    <br/>
    <p ng-show="enable">Watch enabled</p>
    Watch Counter: {{cntr}}   
  </div>
</body>

＆＃13;

Answer 2

我认为您可以取消注册$watch，因为它会返回注销功能

var listener = $scope.initWatch = function() {
    $scope.$watch('test', function(newValue, oldValue) {
        if (newValue !== oldValue)
            $scope.cntr++;
    });
}; 


listener(); // clear the watch

当我在元素上多次点火时，我怎样才能逐一取下手表？

2 个答案:

DEMO