javascript - 从遗留代码调用 AngularJS

Question

我正在使用 AngularJS 构建与旧版 Flex 应用程序交互的 HTML 控件。 Flex 应用程序的所有回调都必须附加到 DOM 窗口。

例如(在 AS3 中)

ExternalInterface.call("save", data);

会打电话

window.save = function(data){
    // want to update a service 
    // or dispatch an event here...
}

我想从 JS 调整大小函数中调度一个 Controller 可以听到的事件。似乎创建服务是要走的路。你能从 AngularJS 之外更新服务吗？ Controller 可以监听来自服务的事件吗？合一experiment (click for fiddle)我似乎可以访问服务，但更新服务的数据不会反射(reflect)在 View 中(在示例中，<option> 应添加到 <select>)。

谢谢!

Answer 1

从 Angular 外部到 Angular 的互操作与调试 Angular 应用程序或与第三方库集成相同。

对于任何 DOM 元素，您都可以这样做:

• angular.element(domElement).scope() 获取元素的当前作用域
• angular.element(domElement).injector() 获取当前应用注入(inject)器
• angular.element(domElement).controller() 获取 ng-controller 实例。

通过注入(inject)器，您可以获取 Angular 应用程序中的任何服务。同样，您可以从作用域调用任何已发布到它的方法。

请记住，对 Angular 模型的任何更改或作用域上的任何方法调用都需要像这样包装在 $apply() 中:

$scope.$apply(function(){
  // perform any model changes or method invocations here on angular app.
});