我在一页中有两个角度应用程序,我需要它们进行通信。具体来说,我希望一个应用程序使用另一个应用程序的服务。我可以使用 Injector.get(service) 获得另一个应用程序的服务,但是当我在一个应用程序中使用该服务更改数据时,它不会反映在另一个应用程序的视图中,即使两者都应该显示相同的数据。您可以在jsFiddle中看到问题的简化版本。为了节省您的点击,这是相关的脚本:
//myAppLeft - an angular app with controller and service
var myAppLeft = angular.module('myAppLeft', []);
myAppLeft.factory('Service1',function(){
var serviceInstance = {};
serviceInstance.data = ['a','b','c','d','e'];
serviceInstance.remove = function(){
serviceInstance.data.pop();
console.log(serviceInstance.data);
};
return serviceInstance;
} );
myAppLeft.controller('Ctrl1', ['$scope', 'Service1', function($scope, service1) {
$scope.data = service1.data;
$scope.changeData =function(){
service1.remove();
}
}]);
var leftAppInjector = angular.bootstrap($("#leftPanel"), ['myAppLeft']);
//myAppRight = an angular app with controller which uses a service from myAppLeft
var myAppRight = angular.module('myAppRight', []);
myAppRight.controller('Ctrl2', ['$scope', function($scope) {
$scope.data = leftAppInjector.get('Service1').data;
$scope.changeData =function(){
leftAppInjector.get('Service1').remove();
}
}]);
var rightAppInjector = angular.bootstrap($("#rightPanel"), ['myAppRight']);
我很高兴知道为什么我的代码不能按预期工作,并且更高兴知道这样的事情是否以及如何工作。我知道,如果不是两个 angular-apps,我会使用一个带有两个模块的 angular-app,这将可以按我的意愿工作,但不幸的是我不能采用这种方法,因为我的应用程序由一个带有扩展的纯 js 核心组成,每个扩展都可以写在不同的库/平台中,我希望我的扩展是有角度的。
谢谢,纽瑞特。