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

Question

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

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

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

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

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

Answer 1

正如 jjmontes 所说，变通方法要求在 template 中声明指令的模板，而不是使用 templateUrl，但这样我会使用 templateCache 没有任何优势，我将其与 Grunt 一起用于我的应用程序(不在 Codepen 中)，后者从我的 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

像魅力一样工作!哈哈哈