如何使元素停止触发ngAnimate

How to make an element stop triggering ngAnimate?

本文关键字：ngAnimate 何使 元素      更新时间：2023-09-26

我正在为我的项目制作一个内容滑块，但我在AngularJS中的经验很少。我找到了一个非常适合我需要的plunker。你可以在这里看到我的实时页面。它是用俄语写的，但我希望它不会成为问题。滑块位于页面的中间-一个包含8张卡片的部分。

所以问题是：滑块由其下方的箭头控制。但是，如果您单击卡内的红色按钮，它将更新模型，并且类ng enter和ng leave将应用于父容器，这将导致滑块动画。如果你只点击这些红色按钮，问题就显而易见了。

有没有办法让这些红色按钮不将ng-enter和ng-leave类应用到容器div？

更新：这是一个plunker，说明了我的问题。动画必须在单击"上一个"answers"下一个"按钮时发生。但当你点击"选择"或"选择"链接时，就会发生这种情况，这会更新模型。

这是一个标记

<body ng-controller="MainCtrl">
    <div class="page-container">
      <div class="gift-page" ng-class="direction" ng-repeat="page in gifts | partition: 6 | offset: currentPage | limitTo: 1">
          <ul class="gift-list clearfix">
              <li class="gift" ng-repeat="gift in page">
                  <div class="gift-item">
                      <div class="gift-details">
                          <h3>{{gift.title}}</h3>
                          <span class="points">{{gift.points}} points</span>
                          <a href="" class="buy" ng-show="!gift.ordered" ng-click="addToBasket(gift)">Choose</a>
                          <a href="" class="bought" ng-show="gift.ordered" ng-click="removeFromBasket(gift)">Chosen</a>
                      </div>
                  </div>
              </li>
          </ul>
      </div>
    </div>
    <div class="controls">
      <button ng-click="prev()">Prev</button>
      <button ng-click="next()">Next</button>
    </div>
  </body>

快速，但不是最好的解决方案是在动作前关闭动画，然后打开：

  $scope.addToBasket = function(gift){
    $animate.enabled(false);
    gift.ordered = true;
    $timeout(function(){
      $animate.enabled(true);
    })
  }

这是砰的一声。稍后将寻找更好的解决方案）

可以尝试添加$event.stopPropagation（）；到ng点击事件，在您的情况下：

<a href="" class="buy" ng-show="!gift.ordered" ng-click="addToBasket(gift); $event.stopPropagation();">Выбрать</a>
相关文章：