javascript - 没有$ evalAsync内部指令，$ animate.removeClass无法工作吗？

我创建了一个指令，该指令在模型更改的视图中淡出和淡入。

app.controller('myCtrl', function($scope, $interval) {
  $scope.number = 0;
  $interval(function() {
    $scope.number++;
  }, 1000);
});

app.directive('fadeOnChange', function($timeout, $animate) {
  return {
    restrict: 'E',

    //We output the value which will be set between fades
    template: '{{theFadedValue.nv}}',

    link: function(scope, elem, attr) {
      //The scope variable we will watch
      var vtw = attr.valueToWatch;

      //We add the anim class to set transitions
      $animate.addClass(elem, 'anim');

      //We watch the value
      scope.$watch(vtw, function(nv) {

        //we fade out
        var promise = $animate.addClass(elem, 'fade-it-out');

        //when fade out is done, we set the new value
        promise.then(function() {

          scope.$evalAsync(function() {
             scope.theFadedValue = {"nv": nv};
            //we fade it back in
            $animate.removeClass(elem, 'fade-it-out');
          });
        });
      })
    }
  };
});

这是视图

<div ng-controller="myCtrl">
  <h1><fade-on-change value-to-watch="number"></fade-on-change></h1>
</div>

它运行完美，但是我想了解为什么我需要使用$ apply，$ digest，$ timeout或$ evalAsync将调用包装到$ animate.removeClass才能起作用？如果我不这样做，那么该班就不会被取消（这使我今天下午很头疼）。

我对这四种方法深有体会，并了解它们的不同之处，但是在这种情况下需要使用其中一种方法使我感到困惑。

plunker

最佳答案

基本上异步方法不会直接运行$ digest循环。（$http的特殊情况，因为它内部包装在$scope.$apply()中）

在您的情况下，您正在等待异步的完整承诺。这就是为什么您可以使用$timeout(function(){ })或$evalAsync的原因，$scope.$apply()和$scope.$apply()中的这种角度服务包装内部运行摘要循环，并且所有作用域变量都会更新。


  $ evalAsync在Angular操纵DOM之后运行，但是
  浏览器渲染之前


Link here有关何时使用$scope.$apply()的更多信息

希望这能消除您的疑虑。谢谢。

关于javascript - 没有$ evalAsync内部指令，$ animate.removeClass无法工作吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28121789/