提问者:小点点

从遗留代码调用AngularJS


我正在使用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 resize函数中,我想调度一个控制器可以听到的事件。似乎创建服务是要走的路。你能从AngularJS之外更新服务吗?控制器能监听来自服务的事件吗?在一个实验中(单击小提琴),我做了,看起来我可以访问一个服务,但是更新服务的数据不会反映在视图中(在示例中为

谢谢!


共3个答案

匿名用户

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

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

    < Li > < code > angular . element(DOM element)。scope()获取元素的当前范围 < Li > < code > angular . element(DOM element)。injector()获取当前的应用程序注入器 < Li > < code > angular . element(DOM element)。controller()来获取< code>ng-controller实例。

从注射器你可以得到任何服务的角度应用。同样,从这个作用域中,你可以调用任何已经发布给它的方法。

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

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

匿名用户

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

如果要从遗留应用程序中调用AngularJS代码,请将AngularJS代码视为遗留应用程序中受保护容器中存在的“微型应用程序”。您不能直接调用它(有很好的理由),但您可以通过$范围对象进行远程调用。

要使用$scope对象,您需要获得$scope的句柄。幸运的是,这很容易做到。

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

例如,假设我们想在AngularJS控制器中调用几个函数,例如sayHi()和sayBybe()。在AngularJS超文本标记语言(视图)中,我们有一个ID为“MySuperAwesomeApp”的div。您可以使用以下代码,结合jQuery来获取$范围的句柄:

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小组的幻灯片中展示了这一点(直接跳到最后两张幻灯片)

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

匿名用户

我发现的这个概念的最好解释是:https://groups.google.com/forum/#!msg/angle/kqFrwiysgpA/eB9mNbQzcHwJ

要保存单击:

// get Angular scope from the known DOM element
e = document.getElementById('myAngularApp');
scope = angular.element(e).scope();
// update the model with a wrap in $apply(fn) which will refresh the view for us
scope.$apply(function() {
    scope.controllerMethod(val);
});