角のディレクティブのアニメーション番号の変更

Question

jqueryのアニメーション機能を含むディレクティブがあります。特定の変数の数値をイージングアニメーションで変更したいと思います。問題は、ディレクティブが読み込まれ、最初の数値が表示されますが、アニメーション効果で変化する数値は表示されないことです。

私はPlunkrに類似のバージョンを作成して、何が起こっているのかを簡単に確認できます。

他の場所から$ apply（）をトリガーすると、数字のアニメーション化された全体がスキップされます。また、コード内で各ステップで適用しようとすると、「進行中」エラーがスローされます。

このプラグインは、小数点以上にはインクリメントしませんし、イージングを使用しない点を除いて、私が必要とするものとほぼ同じです。 http://sparkalow.github.io/angular-count-to/

scope.$watch('difference', function(newVal, oldVal) { 

     jQuery({someValue: oldVal}).animate({someValue: newVal}, { 
      duration: 1000, 
      easing:'swing', 
      step: function(e) { 
      scope.display = e.toFixed(2); 
      scope.$parent.$apply(); 
      } 
     }); 

    }); 

と..

template: function(scope, element, attrs) { 
    return '<h3>' + 
       '<i class="fa progress-arrow" ng-class="[{\'fa-caret-up\': direction_up}, {\'fa-caret-down\': direction_down}]" aria-hidden="true"></i> ' + 
       '{{ display }}' + 
       '</div>' + 
      '</h3>' + 
      '<label>{{ label }} (lbs)</label>'; 

Answer 1

答えはscope.$apply()と一緒に角度$timeout機能を使用することでした。あなたは、セットアップplunkerでき

scope.$watch('difference', function(newVal, oldVal) { 

     jQuery({someValue: oldVal}).animate({someValue: newVal}, { 
      duration: 500, 
      easing:'swing', 
      step: function(e) { 
      $timeout(function() { 
       scope.$apply(function() { 
       scope.display = e.toFixed(2); 
       }); 
      }); 
      } 
     }); 

そして、ここではPlunkr