从不同的框架内一个服务接入AngularJS服务 [英] Access AngularJS service from a service inside a different frame
问题描述
在一个AngularJS应用程序（主），我有一个 IFRAME 这里面还有另外一个AngularJS应用程序（IFRAME）也是我的控制之下。我想两个服务，一个在主应用程序和一个在iframe应用程序之间共享数据。他们都需要读取和写入相同的对象。
In an AngularJS application (main) I have an iframe inside which there is another AngularJS application (iframe) also under my control. I would like to share data between two services, one in the main application and one in the iframe application. They both need to read and write to the same object.
// main
// ... routes ...
views: { main: {
controller: function ($scope, serviceA) {
$scope.serviceA = serviceA;
},
templateUrl: 'iframe.html'
}
// ...
function ServiceA () {
this.sharedData; // exposed to controllers in main app
}
// ...
// iframe
// ...
function ServiceB () {
this.sharedData; // exposed to controllers in iframe app
}
// ...
在iframe中应用的控制器里面，我设法引用 serviceA.sharedData 是这样的：
When inside a controller in iframe application I managed to reference serviceA.sharedData like this:
var self = this;
var parentScope = $window.parent.angular.element($window.frameElement).scope();
parentScope.$watch('serviceA.sharedData', function (newValue, oldValue) {
self.sharedData = newValue;
}
才能实现这一目标又如何？
Can this be achieved and how?
我看了以下，但不能把它变成一个解决方案，但是：
I have read the following, but could not turn it into a solution, yet:
- Bind angular cross iframes, possible?
- Angularjs: call other scope which in iframe
推荐答案
好了，这里是我的解决方案，我希望这是你脑子里想的是什么。
Ok, so here is my solution, I hope this is what you had in mind.
在父应用程序的控制器：
in the controller of the parent application:
mainApp = angular.module('mainApp', []);
mainApp.controller('mainCtrl', ['$scope', 'sharedData', function($scope, sharedData){
$scope.sharedData = sharedData;
//your controller logic goes here ...
}]);
在iframe应用的控制器：
in the controller of the iframe application:
iframeApp = angular.module('iframeApp', []);
iframeApp.controller('iFrameCtrl', function($scope){
//here we get the service instance from the parent application, if you
//need it in other controllers in the iframe app as well, either get it
//there the same way or pass it along via $scope or $rootScope
var sharedData = window.parent.angular.element(window.frameElement).scope().sharedData;
//now we can use sharedData the same way as in the parent application controller
}）;
sharedData.js （用于共享服务的js文件，需求只能由包括 parent.html ）
sharedData.js (the js file for the shared service, needs only be included by parent.html)
mainApp.factory('sharedData', function(){
var list = [];
var mainScope;
var iframeScope;
//this function needs to be called in all setter methods to update the data in both applications
function update(){
if(!mainScope){
mainScope = angular.element(document.body).scope();
}
//$apply() causes errors in the dev console, $applyAsync doesn't, I don't know why
mainScope.$applyAsync();
if(!iframeScope){
//the update function might be called before angular is initialized in the iframe application
if(document.getElementById('iframe').contentWindow.angular){
iframeScope = document.getElementById('iframe').contentWindow.angular.element(document.body).scope();
iframeScope.$applyAsync();
}
} else {
iframeScope.$applyAsync();
}
}
return {
append: function(item) {
list.push(item);
//don't forget to add this at the end of all setter functions in the service
update();
},
getAll: function() { return list }
}
});
在内部框架的东西，不能在工作的jsfiddle（跨域也许），所以我把GitHub的网页上我的更广泛的例子：
The stuff with the iframes doesn't work on jsfiddle (cross-origin maybe) so I put my more extensive example on a github page:
https://github.com/sammax/angulariframe （code）
http://sammax.github.io/angulariframe/main/ （结果）
这篇关于从不同的框架内一个服务接入AngularJS服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
