我知道这是一个老问题,但是我最近正在寻找解决方案,所以我认为我将我的发现放在这里,以防对任何人有用。
在大多数情况下,如果需要外部旧版代码与UI的状态或应用程序的内部功能进行交互,则可以使用服务来抽象化那些更改。如果外部代码直接与您的角度控制器,组件或指令交互,则您的应用程序与旧代码之间的耦合很大,这是个坏消息。
我最终使用的是浏览器可访问的全局变量(即window)和事件处理的组合。我的代码具有一个智能的表单生成引擎,该引擎需要从CMS输出JSON来初始化表单。这是我所做的:
function FormSchemaService(DOM) {
var conf = DOM.conf;
// This event is the point of integration from Legacy Code
DOM.addEventListener('register-schema', function (e) {
registerSchema(DOM.conf);
}, false);
// service logic continues ....
Form Schema Service是按预期使用角注入器创建的:
angular.module('myApp.services').
service('FormSchemaService', ['$window' , FormSchemaService ])
在我的控制器中:function(){'use strict';
angular.module('myApp').controller('MyController', MyController);
MyEncapsulatorController.$inject = ['$scope', 'FormSchemaService'];
function MyController($scope, formSchemaService) {
// using the already configured formSchemaService
formSchemaService.buildForm();
到目前为止,这是纯角度的和面向JavaScript服务的编程。但是,传统的集成在这里出现:
<script type="text/javascript">
(function(app){
var conf = app.conf = {
'fields': {
'field1: { // field configuration }
}
} ;
app.dispatchEvent(new Event('register-schema'));
})(window);
</script>
显然,每种方法都有其优点和缺点。此方法的优势和使用取决于您的UI。先前建议的方法在我的情况下不起作用,因为我的表单架构和旧版代码无法控制和了解角度范围。因此,angular.element('element-X').scope();
如果我们更改范围,则基于的应用程序配置可能会破坏应用程序。但是,如果您的应用程序了解范围,并且可以依靠它不经常更改,那么以前建议的方法是可行的。
希望这可以帮助。也欢迎任何反馈。
var injector = angular.injector(['ng', 'MyApp']);
。这样做将为您提供全新的上下文和重复的上下文myService
。这意味着您将获得服务和模型的两个实例,并将数据添加到错误的位置。您应该改为使用定位应用程序中的元素angular.element('#ng-app').injector(['ng', 'MyApp'])
。此时,您可以使用$ apply包装模型更改。