从旧代码中调用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以外的服务? 控制器可以监听来自服务的事件吗? 在一个实验中(点击小提琴)我似乎可以访问服务,但更新服务的数据并未反映在视图中(在示例中应将<option>添加到<select> )。

谢谢!


从角度到角度的Interop与调试角度应用或与第三方库集成相同。

对于任何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.
    });
    

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

    当从传统应用程序中调用AngularJS代码时,请将AngularJS代码看作是遗留应用程序中受保护容器内的“微应用程序”。 你不能直接调用它(出于很好的理由),但你可以通过$ scope对象进行远程调用。

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

    您可以使用AngularJS“micro-app”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


    我发现这个概念的最大解释在这里:https://groups.google.com/forum/#!msg/angular/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);
    }); 
    
    链接地址: http://www.djcxy.com/p/77549.html

    上一篇: Call AngularJS from legacy code

    下一篇: Can't retrieve the injector from angular