Question

尝试使用角度中的$ interval来使用ng-show更改列表中当前可见的项目。检查html，我注意到角度变化ng-show来自true / false，但它并没有删除ng-hide类。 html很简单：

<h1>Hello Plunker!</h1>
<div ng-controller="MyCtrl">
  <div>Iterator: {{i}}</div>
  <ul>
    <li ng-repeat="d in data" ng-show="{{i == $index}}">{{i}} - {{$index}} - {{d}}</li>
  </ul>
</div>

app.js也很基本：

(function(){  
   var app = angular.module('MyApp', ['my-controller']);
})();

和我的模块/控制器

(function(){
  var app = angular.module('my-controller', []);

  app.controller('MyCtrl', ['$scope', '$interval', function($scope, $interval){
    $scope.data = [111, 222, 333, 444];
    $scope.i = 0;
    var timeoutId;


    timeoutId = $interval(function(){
      $scope.i ++;  
      if ($scope.i >= $scope.data.length)
        $scope.i = 0;
    },
    1000);


  }]);
})();

Here's my plnkr

Answer 1

这是因为你在ng-show表达式中使用插值（{{i == $index}}）设置字符串“true”/“false”，而只是直接提供表达式。

ng-show="i == $index"

<强> Plnkr

只需添加说明，请查看ng-show source code

 scope.$watch(attr.ngShow, function ngShowWatchAction(value) {
    // we're adding a temporary, animation-specific class for ng-hide since this way
    // we can control when the element is actually displayed on screen without having
    // to have a global/greedy CSS selector that breaks when other animations are run.
    // Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845
    $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
      tempClasses: NG_HIDE_IN_PROGRESS_CLASS
    });
  });

它会在属性值上注册一个监视器，因此在使用插值（首先渲染）时，它实际上会在"true"上为第一个项目设置监视，并为最后三个设置"false"（如预期的那样）。一切都很好，手表第一次运行脏检查，它被解析为布尔值，它将ng-hide类添加到最后3个，第一个仍然显示。所以到目前为止，在示波器上设置字符串“true / false”并且它永远不会改变并且观察不再执行（因为它总是会在您的情况下由超时触发的摘要周期中返回相同的值）和项目显示仍然显示和隐藏仍然隐藏，因为它永远不会有机会执行add/removeClass。现在，当你使用一个表达式时，它会在每次摘要发生时得到评估，boolean标志被评估为表达式的值变化，并且观察者被执行并且类被按预期添加/删除。

angularjs - ng-show在$ interval触发时不会更新类

1 个答案: