为什么我的指令在使用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，对于我的应用程序（不在 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

效果就像魅力！哈哈哈