javascript - 从遗留代码中调用AngularJS(Call AngularJS from legacy code)

Question

I'm using AngularJS to build HTML controls that interact with a legacy Flex application.(我正在使用AngularJS来构建与传统Flex应用程序交互的HTML控件。)

All callbacks from the Flex app must be attached to the DOM window.(Flex应用程序中的所有回调都必须附加到DOM窗口。)

For example (in AS3)(例如（在AS3中）)

ExternalInterface.call("save", data);

Will call(将会通知)

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

From within the JS resize function I'd like to dispatch an event that a controller can hear.(在JS resize函数中，我想发送一个控制器可以听到的事件。)

It seems that creating a service is the way to go.(似乎创建服务是最佳选择。) Can you update a service from outside of AngularJS?(你能从AngularJS外部更新服务吗？) Can a controller listen for events from a service?(控制器可以监听服务中的事件吗？) In one experiment (click for fiddle) I did it seems like I can access a service but updating the service's data doesn't get reflected in the view (in the example an <option> should be added to the <select> ).(在一个实验（点击小提琴）我做了似乎我可以访问服务，但更新服务的数据不会反映在视图中（在示例中， <option>应添加到<select> ）。)

Thanks!(谢谢！)

  ask by kreek translate from so

Answer 1

Interop from outside of angular to angular is same as debugging angular application or integrating with third party library.(从角度到角度之间的互操作与调试角度应用或与第三方库集成相同。)

For any DOM element you can do this:(对于任何DOM元素，您可以执行以下操作：)

• angular.element(domElement).scope() to get the current scope for the element(angular.element(domElement).scope()获取元素的当前范围)
• angular.element(domElement).injector() to get the current app injector(angular.element(domElement).injector()获取当前应用程序注入器)
• angular.element(domElement).controller() to get a hold of the ng-controller instance.(angular.element(domElement).controller()来获取ng-controller实例。)

From the injector you can get a hold of any service in angular application.(通过注射器，您可以获得角度应用中的任何服务。)

Similarly from the scope you can invoke any methods which have been published to it.(与范围类似，您可以调用已发布到它的任何方法。)

Keep in mind that any changes to the angular model or any method invocations on the scope need to be wrapped in $apply() like this:(请记住，对范围内的角度模型或任何方法调用的任何更改都需要包含在$apply()如下所示：)

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