为什么我的指令在第一次使用 AngularJS 1.5 时不使用 ng-if 运行进入动画？

Question

http://codepen.io/anon/pen/MygQvb

我正在使用 Angular 1.4.7，然后决定升级。在那之后，使用 ng-if 的指令上的所有动画都在它们应该发生的第一次停止工作。

上面在 Codepen 上的例子说明了我的意思，如果你切换 ng-if 它不会在第一次工作，但后来它工作得很好。

有一些类似的问题，但是 none 解决了我的问题，而且我在 Angular 的旧版本上从未遇到过这个问题。

真正的解决方案会很好，但如果不可能，欢迎任何变通方法。

Answer 1

在您的示例中，Angular 不是第一次添加 ng-enter 和 ng-enter-active。

如果在您的指令中使用 template 而不是 templateUrl，则您的代码有效，避免了 $templateCache:

function profileFloat(){
  var directive = {
    restrict: 'E',
    scope: {
      picture: '='
    },
    template: '<img ng-src="{{picture}}" alt="Profile image" ng-style="{\'max-width\': !higherWidth ? \'100%\' : \'\', \'max-height\': higherWidth ? \'100%\' : \'\'}">',
    link: link
  };

  return directive;

  // Rest of the directive code
  ...

更新了 codepen，将过渡设置为 5 秒以便于类的调试： http://codepen.io/anon/pen/qZWope
此处提到了解决方法：https://github.com/angular/angular.js/issues/12612，这似乎是一个棘手的错误，不确定它是否会很快修复，或者即使已报告 1.5。

Answer 2

正如 jjmontes 所说，解决方法要求在 template 中声明指令的模板，而不是使用 templateUrl，但这样我就不会使用 templateCache 没有任何优势，对于我的应用程序（不在 Codepen 中），我与 Grunt 一起使用，后者从我的 HTML 文件生成它。

每个使用 Grunt 的人都讨厌重复的工作，复制和粘贴我的指令的每个更改 HTML 真的很乏味。

所以，我会使用 $templateCache 到 .get() 我的指令模板，并在 template 属性!

上使用它

见下文：

angular
  .module('potatoApp', ['ngAnimate'])
  .run(template)
  // controllers, directives, stuff

function template($templateCache){

  // Grunt will do this work for me

  $templateCache.put('profile-float.directive.html', '<img ng-src="{{picture}}" alt="Profile image" ng-style="{\'max-width\': !higherWidth ? \'100%\' : \'\', \'max-height\': higherWidth ? \'100%\' : \'\'}">');
}

function profileFloat($templateCache){
  var directive = {
    restrict: 'E',
    scope: {
      picture: '='
    },
    template: $templateCache.get('profile-float.directive.html'), // Keeping the use of $templateCache
    link: link
  };

  // Rest of the directive's code
}

...

代码笔：http://codepen.io/anon/pen/NNKMvO

很有魅力！哈哈哈

为什么我的指令在第一次使用 AngularJS 1.5 时不使用 ng-if 运行进入动画？

Why doesn't my directive's enter animation using ng-if run on first time when using AngularJS 1.5?

javascript

angularjs

angularjs-directive

ng-animate

为什么我的指令在第一次使用 AngularJS 1.5 时不使用 ng-if 运行 进入动画？

Why doesn't my directive's enter animation using ng-if run on first time when using AngularJS 1.5?

javascript

angularjs

angularjs-directive

ng-animate

为什么我的指令在第一次使用 AngularJS 1.5 时不使用 ng-if 运行进入动画？