如何使用自定义模板将动画添加到 `ng-repeat`

Question

在我的 directive 中，我在自定义 directive 上使用 ng-repeate。在自定义 directive 中，我也在使用 $compile 方法。

加载时我需要添加动画。以及当用户点击时需要出现的动画。

在这种情况下如何将 ngAnimation 应用于元素。我尝试使用：

 $animate.addClass(element.find('div'), 'show', function () {
        scope.$apply();
      });

但是不行。

这是我 directive 的完整代码。

myApp.directive("newArray", function ($compile) {

  return {

    scope : {
      value : "=",
      index : "=",
      update:"&"
    },

    link : function (scope, element, attrs) {

      var getTemplate = function (value, index) {

        switch(index) {

          case 0 :
            return '<div ng-click="update()">I am here {{index}} {{value.name}}</div>'
            break;

            case 1 :
            return $('<div />', {
              class:'blue',
              html : "<h1>testing{{index}} {{value.name}}</h1>",
              click : function () {
                scope.update({num: scope.value.num});
              }
            });
            break;

            case 2 :
            return $('<div />', {
              class:'green',
              html : "<h1>testing{{index}} {{value.name}}</h1>",
              click : function () {
                scope.update({num: scope.value.num});
              }
            });
            break;

        }

      }

      element.html(getTemplate(scope.value, scope.index));
      $compile(element.contents())(scope);

      $animate.addClass(element.find('div'), 'show', function () {
        scope.$apply();
      });


    }

  }

})

Demo in Plunker

Answer 1

请尝试将 class 'show' 添加到 ng-repeat。我认为如果指定 css (enter/leave) 的 class 与 ng-repeat.

位于同一元素，则动画有效

为了让动画在页面加载时工作，初始化数组为空数组，然后在超时时设置值。

In template:
<div class="new-array" index="$index" update="update(value)"    value="value" ng-repeat="value in values">{{value.name}}</div>

In directive:
restrict: 'EAC',

http://plnkr.co/edit/DA2hTrySj7WDkRFPEkcq?p=preview

注意：如果我将指令限制为 class 它会起作用。

如何使用自定义模板将动画添加到 `ng-repeat`

How to add animation to `ng-repeat` with custom template

angularjs

ng-animate