Angular ng-animate 1.3. * Приводит к неожиданному поведению в директиве ng-class внутри

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

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

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

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

Попробуйте изменить версию angular (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, я прав?

Если нет, что я делаю неправильно?

Ответы

Ответ 1

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

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

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

Ответ 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 в Angular Директивы (устаревшие).

Ответ 3

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

Измененный plunk здесь

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