Angular 元素 JQuery .on 命令无法正常工作

Question

我有一个使用 Angular JS 1.5.3 用 typescript 编写的指令，我正在使用 webpack 加载 angular 和 jquery 等。我已经设法让 Angular 使用完整的 JQuery 而不是 jquerylite。

但是，在下面的 sn-p 中，我的 element.on 不会触发事件。但是，当我单独使用 jquery 来做同样的事情时，它会起作用。

即控制台只打印“打我”

function DropdownCloseHandler(): ng.IDirective {
  return {
    restrict: 'A',
    link: (scope, element, attrs) => {
      element.on('hidden.bs.dropdown', (e) => {
        console.log('hit me');
      });
      $('#search-box-dropdown').on('hidden.bs.dropdown', (e) => {
        console.log('hit me instead');
      });
    }
  };
}

angular
  .module('components')
  .directive('dropdownClose', DropdownCloseHandler);

element 和 $('#search-box-dropdown') 似乎在我的 chrome 调试器中引用了相同的元素。

有人知道我做错了什么吗？

Answer 1

根据我的经验，使用.on 时，您必须将其绑定到document。

所以，我会使用：

$(document).on('hidden.bs.dropdown', (e) => {
  console.log('hit me');
});

虽然我从未将它与 Angular 一起使用，但我认为没有任何动作可以使它工作。但是先试试？