Как отложить счетчик до завершения анимации

Question

У меня есть фантастическая анимация для корзины покупок, которая перемещает значок корзины с продукта в верхний угол, и он будет делать +1 на прилавке с угловымJS. Однако в то время, когда анимированная тележка достигает вершины, счетчик уже равен +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; 
}; 

Я ищу некоторые рекомендации о том, как сделать это. Благодаря

РЕШЕНИЕ

Использование $ таймаут()

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

Возможно, $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); 
     } 
    }; 
    }); 

Answer 2

Вы должны использовать CSS для анимации. Использование JQuery в AngularJS должно быть максимально сведено к минимуму, или вы будете бесполезно усложнять свою жизнь. Будущее обслуживание будет кошмаром.

Вы можете выполнить это, используя директиву анимации, которая добавляет и удаляет определенный класс на основе состояния анимации и объединяет это с часами $, чтобы определить, когда выполняется окончательное состояние анимации (т. Е. Элемент удален, или конечный класс [т.е. конец анимации] прилагается).

Answer 3

Угловые данные привязаны к моменту совершения события. И все, что связано с этими данными, покажет текущее состояние данных. Вы должны либо переместить jQuery, либо jqlite в некоторую форму обслуживания в Angular и использовать $ apply в конце нашей функции, вложенной или цепочки, или обернуть ее в $ watch, как было упомянуто ранее. Хорошая информация о $ apply и $ watch here. Или просто делайте все в jQuery, используя те же стратегии. Проблема сводится к использованию двух инструментов DOM отдельно. Вы можете полностью использовать их вместе.