ng-show работает неправильно с ng-animimate

Question

Когда загружен модуль анимации, ng-show не работает. Значение по умолчанию для выражения ng-show равно false, но элемент все еще отображается, а класс ng-hide отсутствует. Если я выгружаю модуль анимации, он работает нормально.

<script> 
var app=angular.module('app', ['ngRoute','ngCookies','infinite-scroll','ui.mask','ngAnimate']); 
</script> 

Answer 1

У меня такая же проблема, это, вероятно, проблема времени, но есть обходной путь. Короче говоря, существует некоторое столкновение между классом, определенным в атрибуте «class» с интерполяцией, и другими директивами того же элемента, которые пытаются добавить другой класс. удаление class="{{::item.customClass}}" приводит к тому, что команды ng-class и ng-show работают нормально.

Я не мог воспроизвести его на плунжере, возможно, из-за большого количества задействованных компонентов. мы используем службу $ templateCache, модуль ngAnimate и директиву, которая использует ng-repeat с динамическим классом и ng-show (и многое другое, что, похоже, не влияет на проблему). Удаление любого из упомянутых вопросов решило проблему. есть одна вещь, которую я не пытался, и это пытается отделить код от иерархии ui-view, возможно, ui-router является частью проблемы.

Debugging показал, что после того, как часы в нг-класс/NG-шоу выполняется, был добавлен правильный класс, и это выглядело так: class="{{::item.customClass}} ng-hide", но в конце цикла дайджеста он выглядел следующим образом: class="myCustomClass". Наверное, это то, что происходит и в вашем коде.

Как я справилась с этой ситуацией, перемещая item.customClass в нг-класс, как так: ng-class=[{ ... other classes}, item.customClass]

это временное решение, а не реальное решение, потому что:

1. это, вероятно, реальная проблема внутри Угловой-х код.
2. Я не знаю, как использовать bind один раз здесь, и это важно, конечно.

Answer 2

Посмотрите на animate.css. Он работает с Angular, и вы можете вызвать его по классу = 'ng-show'.

Как это:

<div class="animated fadeInRight" data-ng-class="loginShow"> 

Если вы установите $ scope.loginShow в «нг-шоу» в контроллере это вызовет эффект анимировать автоматически.

Если вы хотите, чтобы вызвать эффект анимировать на «нг-шкура» вы должны написать его в контроллере, как это:

$scope.loginShow = 'ng-hide-add animated fadeOutRight'; 

Надежда это помогает!