Question

我有一个购物车的花式动画，它将购物车图标从产品移动到顶角，它将在angularJS的柜台上做+1。然而，当动画推车到达顶部时，计数器已经是+1。如果我能够延迟angularJS计数器以便在动画完成时添加它，那将是非常棒的。

HTML

<li>({{orderTotal()}}) <i id="cart" class="fa fa-shopping-cart"></i> Order </a></li>

JS

function flyToElement(flyer, flyingTo) {
  if (jQuery(window).width() > 767) {

    var $func = $(this);
    var divider = 1;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));

    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() /2) - ($(flyer).width()/divider)/2-5;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() /2) - ($(flyer).height()/divider)/2-5;

    $(flyerClone).animate({
        opacity: 1.0,
        left: gotoX,
        top: gotoY

    }, 500,
    function () {
      $(flyingTo).fadeOut('fast', function () {
        $(flyingTo).fadeIn('fast', function () {
          $(flyerClone).fadeOut('fast', function () {
            $(flyerClone).fadeIn('fast', function () {
              $(flyerClone).fadeOut('fast', function () {
                $(flyerClone).remove();
              });
            });
          });
        });
      });
    });
  };
}

AngularJS

$scope.orderTotal = function(index) {
  var orderTotal = 0;
  angular.forEach($localStorage.items, function(items) {
    orderTotal += items.quantity;
  })
  return orderTotal;
};

我正在寻找有关如何做到这一点的建议。感谢

解

使用$ timeout（）

var kvv = angular.module('kvv', ['ngStorage']);
kvv.controller('CartController', function($scope, $localStorage, $sessionStorage) {


    $scope.addToCart = function(index, title, desc, price, timeout) {
        var found = false;
        angular.forEach($localStorage.items, function(items) {
            if (items.id  === index) {
              $timeout(function() {(items.quantity++)}, 500);
              found = true;
            }
        });
        if (!found) {
           $timeout(function() {$localStorage.items
           .push(angular.extend({
             id: index,
             title: title,
             quantity: 1,
             price: price}, index))},500);
        }
      };
});

Answer 1

在角度中，您的数据在事件执行时被绑定。绑定到该数据的任何内容都将显示数据的当前状态。您应该将您的jQuery或jqlite移动到Angular中的某种形式的服务中，并在我们的函数嵌套或链接结束时使用$ apply或将其包装在$ watch中，如前所述。 $ apply和$ watch here的好消息。或者只是使用相同的策略在jQuery中完成整个过程。问题归结为分别使用两个DOM工具。你可以完全一起使用它们。

Answer 2

你应该使用css来制作动画。在AngularJS中使用JQuery应该尽可能地减少，或者你不必要地使你的生活变得复杂。未来的维护将是一场噩梦。

您可以使用动画指令完成此操作，该指令根据动画状态添加和删除某个类，并将其与$ watch组合以确定何时执行动画的最终状态（即。元素被删除，或者最后一班[即动画结束]已附上）。

Answer 3

也许$timeout是你需要的。

var kvv = angular.module('kvv', ['ngStorage'])
  .controller('CartController', function($scope, $timeout, $localStorage, $sessionStorage) {
    $scope.checked = false;
    $scope.addToCart = function(index, title, desc, price) {
      $scope.checked = true;
      var found = false;
      angular.forEach($localStorage.items, function(items) {
        if (items.id  === index) {
          $timeout(function() {
            (items.quantity++);
            $scope.checked = false;
          }, 500);
          found = true;
        }
      });
      if (!found) {
       $timeout(function() {
         $localStorage.items.push(angular.extend({
           id: index,
           title: title,
           quantity: 1,
           price: price}, index))
       },500);
      }
    };
  });

如何延迟计数器直到动画结束

3 个答案: