javascript - $animate.addClass 类型错误 : Cannot read property 'parentNode' of undefined

Question

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

$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)

CSS 看起来像:

.translate-to-player-spot-1 {
    transform: translate(0px,-270px);
    transition: transform 50s linear;
}

如果我将 ng-class="card.moveTo" 添加到 HTML 并在指令中设置:

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

然后它实际上会经历动画并添加各种 Angular 类:

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>

相关指令:

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'
    };
});

PlayerHand 是一项服务，getHand() 仅返回一个对象数组。

Answer 1

您收到错误TypeError:无法读取未定义的属性“parentNode”，因为在以下代码中clickedCard不是DOM元素:

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

在您的 link 函数中，您有以下内容:

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>

传递给 link 函数的 element 将是 player-hand-template，而不是一张牌。

您可以执行以下操作:

将 ng-click 更改为以下内容:ng-click="click(card, $event)"

在你的 Controller 中:

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

  var clickedElement = event.currentTarget;
}

现在您可以访问表示卡片的对象和关联的 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 不接受回调函数作为参数，而是返回一个 Promise。

演示: http://plnkr.co/edit/5Gf2ApyxEKgGQAs98IjG?p=preview

请注意，在这种情况下，您也可以将点击逻辑移至 link 函数中。如果你真的应该移动它或不移动它，在没有看到全貌的情况下很难说。通常，当您想要将 API 公开给其他指令时(因为它们可以注入(inject) Controller )，您可以使用 controller，否则您可以使用 link。