Question

我对ng-class有一些奇怪的问题，我怀疑它与竞争条件有关。

这是plunker example

这是相关的js代码

    self.slideLeft = function() {
      if (self.end_index < self.list_of_stuff.length) {
          self.direction = 'left';

          debugger;
          self.start_index = self.start_index + 4;
          self.end_index = self.end_index +  4;
          self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);            
      }

    }

    self.slideRight = function() {
      if (self.start_index > 0) {
          self.direction = 'right';
          debugger;

          self.start_index = self.start_index - 4;
          self.end_index = self.end_index -  4;
          self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);            
      }
    }

这是相关的html

  <div class="stuff-wrapper">
    <div class="stuff" 
         ng-class="bCtrl.directionClass()" 
         ng-repeat="stuff in bCtrl.display_list">
      {{stuff}}
    </div>
  </div>

这是动画。

.left.ng-enter,
.left.ng-leave {
    -webkit-transition: all 1s ease-in-out;

}

.left.ng-enter {
    transition-delay: 0.7s;
    opacity: 0;
    left: 10%;
}
.left.ng-enter-active {
    opacity: 1;
    left: 0;
}

.left.ng-leave {
    opacity: 1;
    left: -10%;
}
.left.ng-leave-active {
    left: -20%;
    opacity: 0;
}

这是一个简单的应用程序，可以左右滑动数字列表。

如果按下左按钮，则数字向左滑动。

如果按下右键，则数字向右滑动。

但是我们看到如果方向发生变化，数字将首先向错误的方向滑动，后续方向将是正确的。

我怀疑这是由于竞争条件造成的。

事实上，我发现使用调试器改变方向ng-class后，self.direction没有得到应用。

这很好奇。

有没有办法解决这个问题？

Answer 1

引用这个（https://stackoverflow.com/a/21664152/2402929）问题的答案：

您需要在css之后对$ scope.elements进行更改 class在DOM上更新。所以你需要延迟DOM操作一个消化循环。这可以通过$ timeout服务来完成（请有关更多信息，请参阅此答案AngularJS $ evalAsync vs $超时）：

在更新css类时，您的元素将在同一摘要循环中删除。含义 - css没有得到更新，元素就被删除了。

摘要循环将包含整个ng-click函数，因为所有角度内置指令代码都包含在$ scope。$ apply call中。

澄清：

$ scope。$ apply（）接受一个函数或一个Angular表达式字符串，和执行它，然后调用$ scope。$ digest（）来更新任何绑定或观察者。

您可以在此处详细了解（http://jimhoskins.com/2012/12/17/angularjs-and-apply.html）。

所以解决你的问题的方法是将数据从数组中删除到$ timeout块中，这将延迟一个摘要循环的DOM操作并分离类的更改和数据的删除：

self.slideLeft = function() {
          if (self.end_index < self.list_of_stuff.length) {
              self.direction = 'left';

              self.start_index = self.start_index + 4;
              self.end_index = self.end_index +  4;
              $timeout(function(){
                self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);            
              });
          }

        }

        self.slideRight = function() {
          if (self.start_index > 0) {
              self.direction = 'right';

              self.start_index = self.start_index - 4;
              self.end_index = self.end_index -  4;
              $timeout(function(){
                self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);            
              });
            }
        }

这是一个工作的人： http://plnkr.co/edit/30wJhL?p=preview

具有ng-class和动画的竞争条件

1 个答案: