Angularjs 如何停止angular 1.2 ngclass动画在重新编译时运行

例如：

在上面提供的示例中，我使用ngClass制作了一个角度动画。重新编译包含动画的元素时，动画将运行。我该如何阻止这种情况发生

HTML:

Javascript:

angular.module('app', ['ngAnimate'])
.controller("appCtrl", function ($scope) { 
  $scope.myVal = 56;
  $scope.changeVal = function() {
    $scope.myVal += 1;
  }
}) 
.directive('recompileTest', function($compile) {
  return {
    link: function(scope, element) {
      var originalHtml = element.html();
      var originalScope = element.scope();
      scope.recompile = function() {
        element.html(originalHtml);
        $compile(element.contents())(originalScope);
      };
    }
  }
})
.directive('valueRotate',  function($timeout) {
  return {
    scope: {
      value: '=valueRotate'
    },
    template: '' +
    '   <span class="value-rotate__value" ng-class="{show: valueToggle == true}">{{ value1 }}</span>' + 
    '   <span class="value-rotate__value" ng-class="{show: valueToggle == false}">{{ value2 }}</span>' + 
    '',
    link: function (scope, element, attrs) {
      element.css({ position: 'relative', overflow: 'hidden' }); 
      scope.$watch('value', function(newValue, oldValue) {
        if (scope.valueToggle) {
          scope.value2 = newValue;          
        } else {
          scope.value1 = newValue;
        }
        scope.valueToggle = !scope.valueToggle;
      });

      //set the initial height based on contents.
      /*
      $timeout(function() {
        element.children().css('height', element[0].offsetHeight + 'px'); 
      });
      */
    }
  };
});

angular.module（'app'，['ngAnimate']））
.controller（“appCtrl”，函数（$scope）{
$scope.myVal=56；
$scope.changeVal=函数（）{
$scope.myVal+=1；
}
}) 
.directive（'recompileTest'，函数（$compile）{
返回{
链接：功能（范围、元素）{
var originalHtml=element.html（）；
var originalScope=element.scope（）；
scope.recompile=函数（）{
html（原始html）；
$compile（element.contents（））（originalScope）；
};
}
}
})
.directive（'valueRotate'，函数（$timeout）{
返回{
范围：{
值：'=valueRotate'
},
模板：“”+
{{value1}}}+
{{value2}}}+
'',
链接：函数（范围、元素、属性）{
css（{position:'relative'，overflow:'hidden'}）；
范围.$watch（'value'，函数（newValue，oldValue）{
if（scope.valueToggle）{
scope.value2=新值；
}否则{
scope.value1=新值；
}
scope.valueToggle=！scope.valueToggle；
});
//根据内容设置初始高度。
/*
$timeout（函数（）{
element.children（）.css（'height'，element[0].offsetHeight+'px'）；
});
*/
}
};
});

当指令显示初始值时，您可以添加一个css类，用

transition:none

进行覆盖

例如：

在css中：

.noAnimate {
  transition: none !important;
} 

在html模板中：

<span class="value-rotate__value" ng-class="{show: valueToggle == true, noAnimate: isInitialValue}">{{ value1 }}</span>

---

希望这能有所帮助。

效果很好！非常感谢。

.noAnimate {
  transition: none !important;
} 

<span class="value-rotate__value" ng-class="{show: valueToggle == true, noAnimate: isInitialValue}">{{ value1 }}</span>

scope.$watch('value', function(newValue, oldValue) {
  // the newValue and oldValue will be equal only when
  // this function is called for the first time,
  // thus it is an initial value.
  scope.isInitialValue = (newValue === oldValue);

  if (scope.valueToggle) {
    scope.value2 = newValue;          
  } else {
    scope.value1 = newValue;
  }
  scope.valueToggle = !scope.valueToggle;
});