angularjs - NG-显示不更新类时$间隔触发 [英] angularjs - ng-show doesn't update class when $interval triggers

问题描述

尝试使用$间隔从使用角度NG-显示更改列表当前可见的项目。检查HTML，我注意到，NG-显示从真/假角度变化，但它不会删除吴隐藏类。
的HTML是简单的：

Trying to use $interval from angular to change the currently visible item in a list using ng-show. Inspecting the html, I noticed that angular changes ng-show from true/false, but it doesn't remove the ng-hide class. The html is simple:

    
    
    
    
  

<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是很基本的，以及：

The app.js is quite basic as well:

(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);


  }]);
})();

这里是我的plnkr

推荐答案

这是因为你用插值（ {{我== $指数}设置字符串true/假 } ）的NG-秀前pression，而不只是直接提供前pression。

That is because you are setting the string "true"/"false" by using interpolation ({{i == $index}}) in the ng-show expression, instead just provide the expression directly.

ng-show="i == $index"

Plnkr

Plnkr

我想补充的解释，有一个看的 NG-节目源$ C ​​$ C

Just to add explanation, have a look at the 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
    });
  });

它的属性值注册表的，因此，使用插值（这使得第一），当所以它实际上是设置在真实的第一个项目和<$腕表C $ C>假在过去三年（如预期）。一切都很好，手表首次脏检查运行，它就会被解析为布尔值，并把它添加NG-隐藏类到最后3和第一个保持显示状态。所以，到现在为止看是设置字符串真/假的范围和它是永远不会改变，看也不再执行和物品（因为它总是会被暂停你的情况引发的消化周期中返回相同的值）显示遗骸显示和隐藏保持隐藏，因为它从来没有得到一个机会来执行添加/ removeClass移除。现在，当您使用EX pression它将让每一个消化发生时进行评估，评估为的前pression变化值与守望布尔标志被执行和类被添加/如预期中删除。

It registers a watch on the attribute value, so when using interpolation (which renders first) so it actually sets watch on "true" for the first item and "false" for the last three (As expected). All is well and the watch runs for the first time for dirty checking and it gets parsed to boolean value and it adds ng-hide class to the last 3 and first one remains displayed. So till now watch is set on the string "true/false" on the scope and it is never going to change and watch no longer executes (since it always will return same value during the digest cycle triggered by timeout in your case) and items shows remains shown and hidden remains hidden as it never gets a chance to execute add/removeClass. Now when you use an expression it will get evaluated every time digest happens, boolean flag evaluated as value of the expression changes and watcher gets executed and class gets added/removed as intended.

这篇关于angularjs - NG-显示不更新类时$间隔触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！