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

Question

Я нахожусь в середине перехода от версии 1.2.* К 1.3.*, И я столкнулся с очень странной и критической ошибкой.

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

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

это Plunker код с угловой версией 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, я прав?

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

Answer 1

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

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

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

Answer 2

Согласно документу 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 в угловых директивах (устарело).

Answer 3

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

Модифицированный планк тут

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