Angular JS控制器检测第三方事件？

Question

我有一个Angular 1.4.9应用程序。我正在使用第三方JS插件（Jasny Bootstrap）。它有一些JS组件，似乎使用简单的JQuery。

他们的文档说插件会在关键点发出事件，例如“itemShown”。我想知道我是否可以在我的页面控制器中检测到这一点并采取行动，如：

“on itemShown function（）{...”

Answer 1

在AngularJS中处理自定义jQuery事件

以下示例显示了一个自定义指令，该指令检测自定义jQuery事件并调用由属性定义的函数。

app.directive("onBsShowOffcanvas", function($parse) {
    return function linkFn(scope, elem, attrs) {
        var fn = $parse(attrs.onBsShowOffCanvas);
        elem.on("show.bs.offcanvas", function(e) {
            fn.assign(scope, {$event: e});
            scope.$apply();
        });
    }
});

在HTML中使用该指令：

<div on-bs-show-offcanvas="offcanvasHandler($event)">

我建议将事件对象公开为$event，因为这是AngularJS事件指令的习惯。

  

$事件

     

ngClick和ngFocus等指令在该表达式的范围内公开$event对象。当jQuery存在或类似的jqLit​​e对象时，该对象是jQuery Event Object的实例。

- AngularJS Developer Guide -- $event

Answer 2

如果你在你的应用程序中嵌入了jQuery（因为Angular默认嵌入了jQlite，而不是jQuery），这里有一个解决方案。

在元素准备就绪后，您可以从控制器执行此操作：

$element.ready(function () {
    $('#offcanvasId').on('hide.bs.offcanvas', function(){
        //...
    })
});

尽管如此，必须有一些没有jQuery的解决方法。

您可以在文档https://docs.angularjs.org/api/ng/function/angular.element

上查看更多内容