нужно использовать $ таймаут и $ применяются requestAnimationFrame

Question

Я пытаюсь создать яваскрипт анимацию с прокатным номером с помощью requestAnimationFrame

Для того, чтобы увидеть увидеть анимацию прокатку, мне нужно использовать $ применять для обновления вид. Проблема здесь в том, что когда я запускаю анимацию, цикл дайджеста уже запущен, поэтому мой $ apply возвращает ошибку «$ apply уже выполняется».

В поисках решения Я использую $ timeout of 0, который работает отлично, но мне было интересно, есть ли другое решение, чтобы избежать использования тайм-аута, который не очень хорош с точки зрения производительности?

Благодарим за помощь!

HTML код:

<div ng-app="myApp"> 
    <div ng-controller="myController as ctrl"> 
    <animated-counter data-from='0' data-to='{{ctrl.limit}}'></animated-counter> 
    </div> 
</div> 

Javascript Код:

(function(){ 
'use strict'; 

angular 
    .module('myApp', []) 
    .directive('animatedCounter', AnimatedCounter); 

    AnimatedCounter.$inject = ['$timeout']; 

    function AnimatedCounter($timeout) { 
     return { 
      restrict: 'E', 
      template: '<div>{{num}}%</div>', 
      link: function (scope, element, attrs) { 
       scope.num = parseInt(attrs.from); 
       var max = parseInt(attrs.to); 

       //Loop to increment the num 
       function animloop() { 
        if (scope.num >= max) { //Stop recursive when max reach 
         return; 
        } 
        requestAnimationFrame(animloop); 
        scope.$apply(function() { 
         scope.num += 1; 
        }); 
       } 

       // $timeout(function() { //if I use $timeout it works perfectly 
        animloop(); 
       // }); 
      } 
     }; 
    } 


angular 
    .module('myApp') 
    .controller('myController', myController); 

    function myController() { 
     var vm = this; 
     vm.limit = 100; 
    } 
})(); 

Вы можете найти здесь CodePen

http://codepen.io/phliem/pen/ZWOjwz?editors=1011

Answer 1

Работа замечательно, если я использую $ evalAsync(), как HadiJZ сказал!

просто нужно заменить

scope.$apply(function() { 
    scope.num += 1; 
}); 

по

scope.$evalAsync(function() { 
    scope.num += 1; 
}) 

Существует хорошая статья здесь http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm