ngAnimate не работает внутри директивы

Я triying добавить nganimation для моего главного загрузчика страницы не повезло :(Это, как я пытаюсь достичь этого Im используя директиву:..ngAnimate не работает внутри директивы

<html> 
... 
<loader-gui></loader-gui> 
</html>

, который имеет этот код внутри:

<div class="loader-gui" loader> 
    <img src="img/loader.gif"/> 
</div>

с этой директивой:

angular.module('myapp.directives', []) 

.directive('loaderGui', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'partials/loader-gui.html' 
    } 
}) 

.directive('loader', ['$http', function ($http) { 
    return { 
     restrict: 'A', 
     link: function ($scope, element, attrs) { 
      $scope.isLoading = function() { 
       return $http.pendingRequests.length > 0; 
      }; 
      $scope.$watch($scope.isLoading, function (value) { 
       if (value) { 
        element.removeClass('ng-hide'); 
       } else { 
        element.addClass('ng-hide'); 
       } 
      }); 
     } 
    }; 
}]);

Таким образом, это работает идеально, после того, как загрузите все ресурсы и http-запросы, мои loader-gui исчезает. Но я хочу сделать его более фантастическим, используя nganimate, чтобы сделать эффект затухания простым.

Я добавил библиотеку, модуль в мое приложение, вне всяких ошибок и свой собственный CSS.

myapp.css

.ng-hide { 
    opacity:0; 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
}

myapp.js

angular.module('myapp', ['ngAnimate', 'myapp.directives']);

Но это не работает, это просто исчезнуть без какого-либо эффекта. Я что-то упускаю? Любой совет? Я читал образцы с методами, запущенными через $ scope, но не используя директиву.

источник

2015-09-09 RicardoGonzales

Если вы не включили ngAnimate в качестве зависимости в свой основной модуль, вы, конечно, захотите сделать это здесь.

angular.module('myapp.directives', ['ngAnimate'])

источник

2015-09-09 22:19:45

спасибо !, Я добавляю зависимость в моем основном приложении: angular.module ('myapp', ['ngAnimate']); – RicardoGonzales

В настоящее время лучшая практика, чтобы сделать анимацию для ngHide и некоторые другие директивы является обработка «переход» классов, которые автоматически добавляются и удаляются во время перехода по ngAnimate. Для ngHide и ngShow классы перехода называются .ng-hide-add и .ng-hide-remove.

В официальной угловой документации для ngHide они дают хороший пример игре с этими 2 классами. Пожалуйста, проверьте это для более подробного примера, как это сделать: https://docs.angularjs.org/api/ng/directive/ngHide#example. Обратите внимание на animate-hide, который они добавляют к элементу, который необходимо оживить. А также файл CSS, который содержит детализированный стиль стиля для анимации.

источник

2016-06-16 08:36:06 Bayu

ngAnimate не работает внутри директивы

ответ

Смежные вопросы