在指令中触发 angular 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 在当前 [=36= 之外执行] 上下文，不会触发摘要循环。

您必须手动完成，例如使用 $apply:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

示例：

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

演示： http://plnkr.co/edit/OepqBsCW25Lf2qCenbtK?p=preview

如果您不是，从您发布的代码中看不出来，但您需要使用 ngAnimate 模块。

注意在demo中我也改了：

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

收件人：

element.fadeOut(800, done);

在指令中触发 angular js 动画

Firing angular js animation within a directive

angularjs

angularjs-directive