Besoin d'utiliser $ timeout et $ appliquer avec requestAnimationFrame

Question

Je suis en train de créer une animation javascript avec un numéro de roulement à l'aide requestAnimationFrame

Pour voir le voir le roulement d'animation, je dois utiliser un $ appliquer pour rafraîchir la vue. Le problème ici est que lorsque je lance l'animation, le cycle de digest est déjà en cours d'exécution donc my $ apply renvoie une erreur "$ apply already in progress".

Vous cherchez une solution J'utilise $ timeout de 0 qui fonctionne parfaitement mais je me demandais s'il y avait d'autres solutions pour éviter d'utiliser un timeout qui n'est pas vraiment bon en terme de performance?

Merci pour votre aide!

Html Code:

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

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

Vous pouvez trouver ici un CodePen

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

Answer 1

Travailler Si j'utilise evalAsync $() comme HadiJZ m'a dit!

juste besoin de remplacer

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

par

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

Il y a un bon article ici http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm