Javascript $animate.addClass类型错误：无法读取属性'；parentNode'；未定义的

对于我的指令，我尝试使用动画服务：

$animate.addClass(clickedCard, "translate-to-player-spot-1", function () {
    alert('wooo!');
});

但这会立即触发警报，动画不会发生！我需要在动画结束时执行功能

更新我将Angular版本更改为1.3.6，现在得到错误：

TypeError: Cannot read property 'parentNode' of undefined
    at http://192.168.0.102/CardGame/js/angular-animate.min.js:20:254
    at http://192.168.0.102/CardGame/js/angular-animate.min.js:8:69
    at k.$digest (http://192.168.0.102/CardGame/js/angular.min.js:124:43)
    at k.scopePrototype.$digest (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1468:23)
    at k.$apply (http://192.168.0.102/CardGame/js/angular.min.js:126:58)
    at k.scopePrototype.$apply (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1478:22)
    at HTMLDivElement.<anonymous> (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:797:25)
    at HTMLDivElement.c (http://192.168.0.102/CardGame/js/angular.min.js:32:285)

如果我将

ng class=“card.moveTo”

添加到HTML并在指令中设置：

clickedCard.moveTo = 'translate-to-player-spot-1'

app.directive('playerHandTemplate', function(PlayerHand, PlayerPlayed) {
    return {
        restrict: 'E',
        templateUrl: 'templates/card.html',
        scope:{},
        link: function(scope, element, $animate) {
            element.on('click', function() {
                scope.$apply(function() {
                    $animate.addClass(element, 'translate-to-player-spot-1');
            })});
        },
        controller: function($scope, $animate) {
            this.cards = PlayerHand.getHand();

            $scope.click = function() {
                var clickedCard = this.card;

                if (clickedCard.readyToMove === true) {
                    $animate.addClass(clickedCard, "translate-to-player-spot-1", function () {
                        alert('wooo!');
                    });
                } else {
                     PlayerHand.changeReadyToMove(clickedCard);
                }

            }

        },
        controllerAs: 'cardsCtrl'
    };
});

然后，它实际上会经过动画，并添加各种角度类：

ng-animate translate-to-player-spot-1-add translate-to-player-spot-1 translate-to-player-spot-1-add-active

我有一种感觉，我不理解AngularJS中的动画-有人能解释一下吗

谢谢

HTML：

<div id="{{card.id}}" ng-class="card.moveTo" class="card-wrap card-art card-art-{{card.back}} ready-to-move-{{card.readyToMove}}" ng-click="click()" ng-repeat="card in cardsCtrl.cards">
    <div ng-class="card.name" class="card-art">
        <div class="card"></div>
    </div>
</div>

---

PlayerHand是一个服务，getHand（）只返回一个对象数组。

您会得到错误

TypeError:无法读取未定义的属性'parentNode'，因为在下面的代码
中，clickedCard
不是DOM元素：

$animate.addClass(clickedCard, "translate-to-player-spot-1", function () {
  alert('wooo!');
});

在
链接
功能中，您具有以下功能：

element.on('click', function() {
  scope.$apply(function() {
    $animate.addClass(element, 'translate-to-player-spot-1');
  });
});

这不会像预期的那样起作用

考虑以下呈现HTML的简化示例：

<player-hand-template>
  <card></card>
  <card></card>
  <card></card>
</player-hand-template>

现在，您可以访问表示卡的对象和关联的DOM元素，例如：

$scope.click = function(card, event) {

  if (card.hasMoved) return;

  card.hasMoved = true;

  var clickedElement = event.currentTarget;

  var promise = $animate.addClass(clickedElement, 'translate-to-player-spot-1');

  promise.then(function() {
    console.log('Done.');
  });
};

如上所述，在Angular 1.3中，
$animate.addClass
不将回调函数作为参数，而是返回一个承诺

演示：

请注意，在这种情况下，您还可以将单击逻辑移动到
链接中。如果你真的要移动它或不移动它是很难说没有看到完整的图片。通常，当您想将API公开给其他指令（因为它们可以注入控制器）时，您会使用
controller
，否则您会使用
link
第一个示例中的
clickedCard
是什么？传递给
addClass
的第一个参数应该是DOM元素。@tasseKATT我检查了版本并更新到了最新版本，所以它是1.3.6，但现在我得到了一个不同的错误。clickedCard是数组中的一个对象。我将添加更多代码以使其更清晰，但当您说DOM元素时，我假设您指的是DOM元素绑定到的内容，对吗？我认为在Angular中，我不应该直接修改DOM元素。不，我指的是DOM元素。有时您必须直接处理DOM，使用
$animate
服务就是其中之一。当你必须这么做的时候，按照指令去做。指令放在哪里，在带有ng repeat的div的父元素上？@tasseKATT我已经在代码中添加了完整的指令，从我的阅读来看，我认为我应该使用link而不是controller来制作动画，比如：
link:function（scope，element，$animate）{element.on（'click'，function（）{scope.$apply（function（）{$animate.addClass（元素，'translate-to-player-spot-1'）；}）}，
但我不知道如何使用它-一些指导会很好：）明天早上我会看一看，并尽我所能帮助：）谢谢！我不想问，但你能不能碰巧提供一个简单的/有代表性的链接函数，因为我不熟悉它。到目前为止，我已经从Angular成型中学习Angular，他们没有我没有详细介绍link函数，我对它的阅读也不是很清楚。只要问一下，没问题：）这里有一个使用link的版本：似乎我对“卡”做了什么promise中的对象没有通过更新来更新：基本上我想在我自己的应用程序中做的是：抱歉不断打扰！啊，我忘了在传递给
$animate
-promise的回调函数中始终需要使用
$apply
，如果它包含特定角度的代码。它隐藏在文档的某个地方例如：正如我所说，您可以继续问，这没有问题：）注意，当删除元素时，css转换延迟将被应用，因此您可能希望将转换和转换分为两个不同的类。然后您可以从元素中删除带有转换的类在移除物品之前，应立即移除物品。
$scope.click = function(card, event) {

  var clickedElement = event.currentTarget;
}

$scope.click = function(card, event) {

  if (card.hasMoved) return;

  card.hasMoved = true;

  var clickedElement = event.currentTarget;

  var promise = $animate.addClass(clickedElement, 'translate-to-player-spot-1');

  promise.then(function() {
    console.log('Done.');
  });
};