从遗留代码调用 AngularJS

javascript angularjs actionscript-3 externalinterface

2022-08-30 01:48:53

我正在使用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调整大小函数中，我想调度一个控制器可以听到的事件。创建服务似乎是要走的路。你能从AngularJS之外更新服务吗？控制器能否侦听来自服务的事件？在一个实验中（单击fiddle），我似乎可以访问服务，但更新服务的数据不会反映在视图中（在示例中，应该将a添加到）。<option><select>

谢谢！

答案 1

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

对于任何 DOM 元素，您都可以执行以下操作：

angular.element(domElement).scope()以获取元素的当前范围
angular.element(domElement).injector()以获取当前应用程序注入器
angular.element(domElement).controller()以获取实例。ng-controller

从喷油器中，您可以在角度应用中获得任何服务。同样，从作用域中，您可以调用已发布到它的任何方法。

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

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

答案 2

Misko给出了正确的答案（显然），但我们中的一些新手可能需要进一步简化。

如果要从旧版应用程序中调用AngularJS代码，请将AngularJS代码视为存在于旧版应用程序中受保护容器中的“微应用程序”。您不能直接调用它（有很好的理由），但您可以通过$scope对象进行远程调用。

若要使用 $scope 对象，需要获取 $scope 的句柄。幸运的是，这很容易做到。

您可以使用AngularJS“微应用”HTML中任何HTML元素的id来获取AngularJS应用程序$scope的句柄。

例如，假设我们想在AngularJS控制器中调用几个函数，例如sayHi（）和sayBye（）。在AngularJS HTML（视图）中，我们有一个id为“MySuperAwesomeApp”的div。您可以使用以下代码与 jQuery 结合使用来获取$scope句柄：

var microappscope = angular.element($("#MySuperAwesomeApp")).scope();

现在，您可以通过作用域句柄调用您的 AngularJS 代码函数：

// we are in legacy code land here...

microappscope.sayHi();

microappscope.sayBye();

为了使事情更方便，您可以使用函数随时获取作用域句柄：

function microappscope(){

    return angular.element($("#MySuperAwesomeApp")).scope();

}

然后，您的调用将如下所示：

microappscope().sayHi();

microappscope().sayBye();

您可以在此处看到一个工作示例：

http://jsfiddle.net/peterdrinnan/2nPnB/16/

我还在渥太华AngularJS组的幻灯片中展示了这一点（只需跳到最后2张幻灯片）

http://www.slideshare.net/peterdrinnan/angular-for-legacyapps