Question

我使用的是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
}

...

Codepen：http://codepen.io/anon/pen/NNKMvO

像魅力一样工作！哈哈哈

Answer 2

在您的示例中，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。

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

2 个答案: