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

Question

我有一个Angular 1.4.9应用程序。我使用的是第三方JS插件(Jasny Bootstrap)。它有一些似乎使用简单JQuery的JS组件。

他们的文档说这个插件会在关键点发出事件，比如"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事件指令的习惯。

$event

像ngClick和ngFocus这样的指令在该表达式的作用域内公开了一个$event对象。当存在jQuery时，该对象是jQuery Event Object的实例，或者是类似的jqLite对象。

-- AngularJS Developer Guide -- $event

Answer 2

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

在您的元素准备好之后，您可以从控制器完成此操作：

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

尽管如此，在没有jQuery的情况下必须有一些变通方法。

您可以在documentation https://docs.angularjs.org/api/ng/function/angular.element上查看更多信息