如何让元素停止触发ngAnimate?

时间:2014-10-31 14:05:12

标签: javascript html css angularjs slider

我为我的项目制作了一个内容滑块,但我在AngularJS中的实际情况很少。 我发现this plunker非常符合我的需求。你可以看到我的直播page here。它是俄语,但我希望它不会成为一个问题。滑块位于页面中间 - 一个包含8张卡片的部分。

所以问题是: 滑块由其下方的箭头控制。仍然如果你点击卡片内的红色按钮,它将更新模型和类ng-enter和ng-leave将应用于父容器,这将导致滑块动画。好吧,如果你只是点击这些红色按钮就会出现问题。

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

更新:Here is a plunker,这说明了我的问题。单击“上一个”和“下一个”按钮时,必须执行动画。但是当你点击"选择"或"选择"链接,用于更新模型。

这是标记

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

2 个答案:

答案 0 :(得分:1)

快速,但不是最佳解决方案是在动作之前关闭动画并在之后开启:

  $scope.addToBasket = function(gift){

    $animate.enabled(false);

    gift.ordered = true;

    $timeout(function(){
      $animate.enabled(true);
    })
  }

这是plunk。 以后会寻找更好的解决方案))

答案 1 :(得分:0)

可以尝试添加$ event.stopPropagation();对于ng-click事件,在您的情况下:

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