Angular ng-animate 1.3.* Причины неожиданного поведения внутренней директивы ng-class

Я занимаюсь переходом с версии 1.2.* на 1.3.* и столкнулся с очень странной и критической ошибкой.

В моем приложении очень простое directive содержит template с ng-class (с условием для свойства области действия), по какой-то причине оно не работает с версией 1.3.*, и отлично работает с версией 1.2.*.

Взгляните на этот Plunker, чтобы проиллюстрировать проблему.

Этот код Plunker относится к версии angular 1.2.*, и, как вы можете видеть, он работает нормально.

Попробуйте изменить угловую версию (index.html)

<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.9/angular-animate.js"></script>
   <!--<script src="https://code.angularjs.org/1.2.28/angular.js"></script>
   <script src="https://code.angularjs.org/1.2.28/angular-animate.js"></script>-->

Обновите страницу, и тогда вы увидите ошибку:
Angular не обновляет ng-класс в соответствии с изменением свойства «active».

Я попытался понять, что может быть причиной этой ошибки, и после многих попыток я обнаружил, что модуль 'ngAnimate' вызывает эту проблему. попробуйте удалить зависимость 'ngAnimate' (script.js):

  //var app = angular.module('app', ['ngAnimate']);
    var app = angular.module('app', []);

И тогда вы можете видеть, что все в порядке, поэтому 'ngAnimate' версия 1.3.* вызывает эту проблему.

Итак, это ошибка AngularJS, я прав?

Если нет, то что я делаю не так?


angularjs angularjs-directive ng-class ng-animate isolate-scope
person cheziHoyzer    schedule 20.01.2015    source источник
comment
Спасибо за совет. У меня возникла проблема с ng-классом после обновления, когда класс либо не обновлялся, либо сохранял как старое, так и новое значение в обновляемой переменной области. Я ссылался на модуль ng-animate, но на самом деле не использовал его. После удаления этой ссылки я пока не видел проблемы.   -  person Lukus    schedule 26.03.2015
comment
ты это проверял? docs.angularjs.org/guide/migration#animation-nganimate-   -  person Lucas Rodriguez    schedule 17.12.2015

Ответы (3)


arrow_upward
7
arrow_downward

У вас есть какая-то конкретная причина использовать параметр replace в директиве? Если нет, вы можете просто удалить его, и он отлично работает. Ссылка на рабочий плункер с Angular 1.3.9:

http://plnkr.co/edit/jLIS9uJ1PHC64q6nEmtB?p=preview

V1.3.9 docs сообщает, что replace устарела и очень редко требуется для работы директив, и, по-видимому, в вашем случае это также вызвало некоторые проблемы.

person Fissio    schedule 17.12.2015

arrow_upward
1
arrow_downward

Согласно документу replace будет объявлено устаревшим в версии 2. Поскольку вы используете Angular 1.3.9, это должно быть хорошо.

Чтобы решить эту проблему, вы можете либо удалить replace из директивы, либо, если вы хотите использовать replace, затем обернуть содержимое шаблона директивы, которое имеет ng-transclude, в div, как показано ниже.

<div><div ng-click='click()' ng-class='{\"{{defaultColorClass}}\" : !active, \"{{activeColorClass}}\": active, \"mousePointer\" : !active}' class='k-content-button-inner-style {{effectClass}} {{externalClass}}' ng-transclude></div></div>

Для получения дополнительной информации см. https://docs.angularjs.org/api/ng/directive/ngTransclude , Объясните replace=true в директивах Angular (устарело).

person Sameer K    schedule 23.12.2015

arrow_upward
1
arrow_downward

@bensiu: Удаление неиспользуемой* переменной {{effectClass}} в template заставит ее работать для 1.4.4 в примере plunker, связанном с вопрос.

Измененный планк здесь

*Редактировать: Вероятно, я должен сказать «использование переменной вне области видимости», а не «неиспользуемая переменная».

person Coder X    schedule 23.12.2015