Почему моя директива не вводит анимацию с помощью ng-if при первом запуске с AngularJS 1.5?

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

Я использовал Angular 1.4.7, а затем решил обновить. После этого все анимации по директивам используют ng-if перестал работать в первый раз, когда они должны были случиться.

Пример выше на Codepen показывает, что я имею в виду, если вы переключаете ng-if это не будет работать в первый раз, но тогда это работает просто отлично.

Есть несколько похожих вопросов, но ни один из них не решил мою проблему, и у меня никогда не было этой проблемы в более старой версии Angular.

Реальное решение было бы замечательно, но если это невозможно, любой обходной путь приветствуется.

Источник

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
}

...

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

Работает как шарм! Хахаха

Источник

В вашем примере 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
  ...
  • Обновленная кодовая ручка с переходом на 5 секунд для упрощения отладки классов: http://codepen.io/anon/pen/qZWope
  • Обходное решение упоминается здесь: https://github.com/angular/angular.js/issues/12612, кажется, что это сложная ошибка, не уверен, будет ли она исправлена ​​в ближайшее время, или даже если об этом сообщалось для 1.5.
Источник
Другие вопросы по тегам