розжиг угловой Js анимации в директиве

Question

У меня есть простая директива вдоль этих линий:

angular.module('application').directive('sdTitle', sdTitleDirective); 
 

 
sdTitleDirective.$inject = ['$animate']; 
 
function sdTitleDirective($animate) { 
 
    var directive = { 
 
    template: '<div class="title-container">some content</div>', 
 
    link: link, 
 
    replace: true 
 
    }; 
 

 
    return directive; 
 

 
    function link(scope, element, attrs) { 
 
    element.bind("click", function() { 
 
     $animate.leave(element); 
 
    }); 
 
    } 
 
}

И анимация, подобной этой:

angular.module('application').animation('.title-container', titleAnimation); 
 
function titleAnimation() { 
 
    return { 
 
    leave: leaveAnimation 
 
    }; 
 

 
    function leaveAnimation(element, done) { 
 
    console.log('animate leave', element); 
 
    element.hide().fadeOut(800, done); 
 
    } 
 

 
}

Кажется, я не могу заставить leaveAnimation фактически срабатывать при нажатии элемента директивы. Мне, должно быть, что-то не хватает, как работает $ animate или как анимация javascript вызывается, но я в недоумении.

Как правильно использовать методы анимации $ animate службы в директиве и с анимацией javascript, а не с CSS3?

Answer 1

обработчиков событий DOM, приложенных к примеру addEventListener() или методы jqLite/JQuery bind и on выполняются вне текущего углового контекста и не будут вызывать цикл Digest.

Вам придется сделать это вручную, используя, например, $apply:

$ применяются() используется для выполнения выражения в угловой из-за пределов угловой рамочным. (Например, из событий браузера DOM, setTimeout, XHR или сторонних библиотек). Поскольку мы вызываем в угловой каркас, нам необходимо выполнить правильный жизненный цикл обработки исключений, выполняющих часы.

Пример:

element.bind("click", function() { 
    scope.$apply(function() { 
    $animate.leave(element); 
    }); 
}); 

Демо:http://plnkr.co/edit/OepqBsCW25Lf2qCenbtK?p=preview

Это не видно из вашего публикуемую кода, если у вас нет, но вы должны использовать модуль ngAnimate.

Обратите внимание, что в демо-версии я тоже изменился:

element.hide().fadeOut(800, done); 

To:

element.fadeOut(800, done);