设置特定值时有条件地一次性绑定或取消绑定侦听器答案

【问题标题】：Angular One-time bind conditionally OR unbind listener when a specific value is set设置特定值时有条件地一次性绑定或取消绑定侦听器
【发布时间】：2016-10-18 05:13:32
【问题描述】：

我在 DOM 中有如下内容：

 <div ng-if="variant"
    ng-include="'size-picker.html'">
 </div>

在控制器中：

$scope.variant = false;
// after some unknown time there may be:
$scope.variant = true;

我想在variant 为真时显示该 div。所以，

$scope.variant 将以false 开头。一段时间后，它可能/可能不会变成true。当$scope.variant 变成true 时，它永远不会改变它的价值。所以我想要的是一次性绑定ng-if 一次$scope.variant 是true。

类似的方法：

<div ng-if="::variant"
    ng-include="'size-picker.html'">
</div>

当它为 false 时将停止绑定。

我可以通过第一次停止将false 分配给variant 来实现它，但在我的情况下这是不可能的。

当variant 是true 时，我如何取消绑定 ng-if？

【问题讨论】：

标签： javascript angularjs one-time-binding

【解决方案1】：

您可以使用$watch 取消注册binding 或scope

$watch 返回一个deregistration 函数。

您可以使用$watch 调用返回的函数取消注册$watch：

var unwatch = $scope.$watch('variant', function(newValue, oldValue) {
    if(newValue == true)
    {
        unwatch();
    }
});

所以，一旦你的变体变为真，它上面的手表就会被移除，绑定也会停止。

var app = angular.module( "Demo", [] );

app.controller(
  "AppController",
  function( $scope ) {
    $scope.count = 0;
    $scope.after_unwatch = false;

    var unbindWatcher = $scope.$watch(
      "count",
      function( count ) {
        alert( "Watching click count." );
        if ( count >= 5 ) {
          $scope.after_unwatch = true;
          unbindWatcher();
        }

      }
    );


  
    $scope.incrementCount = function() {
      $scope.count++;
    };

  }
);

<html>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <div  ng-app="Demo" ng-controller="AppController">
    <h1>
      Unbinding $watch() Listeners In AngularJS
    </h1>

    <p>
      <a ng-click="incrementCount()">Click it for five times, and after that watch on `count` is removed.</a>
      &raquo;

    </p>

    <p ng-show="after_unwatch">
      <em>The watch on click is removed.</a>
    </p>
  </div>
 </body>
</html>

运行此代码

Here is a plunker

【讨论】：

谢谢。所以你是说 Angular 会完全停止关注那个变量？即使它依赖于其他地方，比如 DOM？
是的，一旦您将该范围变量放入$watch 函数中，它的范围就会根据条件被删除。
举个例子，贴出来。
没有。我现在切换任务。认为它会为我工作。谢谢@Sravan

【解决方案2】：

文档说：

一次性表达式一旦稳定就会停止重新计算，如果表达式结果是非未定义值。

所以你可以从一个未定义的值开始。

【讨论】：

在我的情况下，它将以 false 开头。这是一个巨大的代码库。我这样做是有限制的。
如果 Sravan 的回答不适用于您的特定情况，您可以为 ngIf 使用不同的未定义变量，然后监视 variant 的状态，并适当地更新该变量。不是最优的，但有时会遇到困难的限制，这是我们能做到的最好的
这是一个不错的方法。