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

【问题标题】：Angular JS controller detect third-party event?Angular JS控制器检测到第三方事件？
【发布时间】：2016-05-29 16:14:08
【问题描述】：

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

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

"关于itemShown函数(){..."

【问题讨论】：

您是否考虑过将其添加到指令而不是控制器中？
如果您提供JSFiddle 或PLNKR 显示您的问题，您的问题可能会得到更多关注。
在其中一个站点上重新创建设置太难了。我通常会这样做，但这涉及到几个外部库等。

标签： javascript jquery angularjs twitter-bootstrap jasny-bootstrap

【解决方案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 存在时，该对象是 jQuery Event Object 的实例或类似的 jqLite 对象。

-- AngularJS Developer Guide -- $event

【讨论】：

我的代码在该指令中的位置，例如log.debug('hello world')?我尝试在scope.$apply 之后插入它，但没有骰子。

【解决方案2】：

如果您在应用程序中嵌入 jQuery（因为 Angular 默认嵌入 jQlite，但不嵌入 jQuery），这是一种解决方案。

在你的元素准备好之后，你可以从控制器中做到这一点：

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

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

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

【讨论】：

谢谢。因为我使用的是 Bootstrap 3.35，所以我也在使用 jQuery。我会试试这个。