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

Question

I have a fancy animation for a shoppingcart which moves a cart icon from the product to the top corner and it will do a +1 on the counter with angularJS. However at the time the animated cart reaches the top the counter is already +1. It would be awesome if I was able to delay the angularJS counter so that it will be added when the animation is completed.

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

I'm looking for some advise on how to do this. Thanks

SOLUTION

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

In angular your data is bound at the moment the event is executed. And anything bound to that data will show the current state of the data. You should either move your jQuery or jqlite into some form of service in Angular and use a $apply at the end of our function nesting or chaining or wrap it in the $watch as previously mentioned. Good info on $apply and $watch here . Or Just do the entire thing in jQuery using the same strategies. The issue comes down to using two DOM tools separately. You can totally use them together.

Answer 2

You should use css for the animation. Using JQuery in AngularJS should be minimized as much as possible, or you're complicating your life needlessly. Future maintenance will be a nightmare.

You can accomplish this using an animation directive that adds and removes a certain class based on the animation state, and combine that with a $watch to determine when the final state of the animation is executed (ie. element is removed, or final class [ie. animation-end] is attached).

Answer 3

Maybe $timeout is what you need.

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