从简单的外部 javascript 代码访问 AngularJS 1.6 组件函数答案

【问题标题】：Access to AngularJS 1.6 component function from simple outside javascript code从简单的外部 javascript 代码访问 AngularJS 1.6 组件函数
【发布时间】：2017-09-17 07:56:22
【问题描述】：

我需要调用在我的 AngularJS 1.6 应用程序的组件中定义的函数，但我需要在 Angular 应用程序之外的简单 javascript 代码中执行此操作。我该怎么做？

【问题讨论】：

我不会问你为什么要这样做，@ArpadBajzath 提供的答案似乎会起作用，但这是一种非常糟糕的做法，最终会咬你或维护者。说了这么多，但如果你想快速测试一些肮脏的东西，你可以试试。
谢谢@Gaurav，我这样做的主要目的是因为我想将此组件嵌入到外部引导模式中，并且我需要按下组件上的按钮来关闭此模式并执行其他操作。如果你能给我一些关于如何以更好的方式做到这一点的建议，我将不胜感激。
那么，为什么不创建一个包装引导模式的指令，或者更好地使用角度引导。可能这会有所帮助angular-ui.github.io/bootstrap/#modal
谢谢，我去看看。

标签： javascript angularjs angular-components

【解决方案1】：

使用标准的事件广播将对您有所帮助。

在你的组件内部：

document.addEventListener('trigger-my-method', () => myMethod());

其他地方：

let myEvt = new Event('trigger-my-method'); document.dispatchEvent(myEvt)

编辑：我没有测试过这个解决方案，我也没有深入了解 Angular，但它应该可以工作

【讨论】：

感谢您的回答，我不明白您告诉我的方式。你能给我一个例子吗？这是我的组件：
非常感谢@ArpadBajzath，我试试看。

【解决方案2】：

如果您想快速而肮脏地测试一些东西，可以从开发者控制台访问该功能：

scope = angular.element($0).isolateScope();
scope.$ctrl.myFunction();

其中$0 是通过使用right click -> Inspect 选择组件或单击开发者控制台元素窗口中的元素来设置的。

欲了解更多信息，请参阅AngularJS angular.element API Reference - jQuery/jqLite Extras

【讨论】：