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

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

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

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

Это код 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' (скрипт.js): 
  //var app = angular.module('app', ['ngAnimate']);
    var app = angular.module('app', []);

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

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

Если нет, то что я делаю не так?
3 15
angularjs angularjs-directive ng-class

3 ответа:

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

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

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

7

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

1

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

Модифицированный Планк здесь

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

1