Question

此Plunker显示使用ng-repeat显示为无序列表的数组。

每件商品都有一个向上/向下按钮，可通过javascript splice与上方或下方的商品交换位置。

还有一个animate指令，为每个移动的项目添加一个类：向上移动数组的项目以绿色突出显示，向下移动的项目以红色突出显示。

然而，动画是错误的，我认为因为该指令会在addClass上触发removeClass和click。有人可以告知是否是这种情况，如果是这样，哪个事件应该取而代之？我尝试$scope.$watch失败了。

在我看来，更好的方法可能是观察数组集合，比较索引更改并根据项目索引是否为＆gt;进行突出显示。或者＆lt;之前。

Answer 1

你有几个错误。这是一个分叉的Plunker

angular.module('App').directive('animateOnChange', function($animate) {
  return function(scope, elem, attr) {
    scope.$watch('direction', function(newVal) {
      if (newVal == 'up') {
        $animate.addClass(elem, 'change-up', function() {
          $animate.removeClass(elem, 'change-up');
        });
      }
    });
  } ; 
});

$watch方法将String作为其第一个参数
您尝试传递给element的{{1}}应该已命名为$animate

继续前进，请记住elem处理程序仅在$watch更改时触发。因此，如果你两次“上升”，它将只在第一次动画。你需要再次'向下'才能使'up'动画化。但你应该能够弄清楚如何让它现在正常运作。

在位置更改时为数组项设置动画

1 个答案: