我有一个控制器,它使用$ http获取XML文件并将其解析为json对象。这是'MainCtrl'。现在我想在其他控制器中获得相同的json对象而不再通过$ http,因为我已经加载了XML。
这是我的第一个控制器
angularXML.controller('MainCtrl', ['$scope', '$http','courseDefService', function($scope, $http, courseDefService) {
$http.get(base_url + 'assets/js/angularxml/courseDef.xml').then(function(response) {
var chapters = [];
var courseDef = x2js.xml_str2json(response.data);
console.log(courseDef);
}
这是我的第二个控制器
angularXML.controller('chapterCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.chapterNumber = $routeParams.id;
var chapter = $scope.chapterNumber - 1; /* index starts from zero */
}
我想我需要使用工厂。但我不知道该怎么做。我尝试了一个实现,我在工厂内获取XML。但是当我调用工厂方法时,它正在执行另一个我通过控制台确认的ajax请求。
请帮忙。
答案 0 :(得分:5)
如何在应用中创建某种消息总线?
首先,创建一个MessageBus
服务:
module.factory("MessageBus", function($rootScope) {
return {
broadcast : function(event, data) {
$rootScope.$broadcast(event, data);
}
};
});
然后,将其注入发起者控制器:
function OriginatorController($scope, MessageBus) {
$scope.funct = function(e) {
// get data
MessageBus.broadcast("data", data);
};
};
在任何地方订阅活动:
$scope.$on("data", function(arguments) {
console.log(arguments);
});
您甚至可以直接通过DI使用$rootScope
并在控制器中调用$broadcast
,但创建服务更具表现力。
答案 1 :(得分:3)
这是另一种快速而肮脏的方法:http://jsfiddle.net/cAY2N/
基本上,每个控制器都引用了服务中的一些变量。每当服务器的数据发生变化时,所有控制器都会自动反映这些变化。
var app = angular.module('centralizedData', []);
app.service('CentralService', function($q, $timeout) {
var self = this,
count = 0
;
this.centralData = {};
this.getData = function() {
$timeout(function() {
self.centralData.message = 'Hello: ' + count++;
});
};
});
app.controller('FirstController', function($scope, CentralService) {
$scope.data = CentralService.centralData;
CentralService.getData();
});
app.controller('SecondController', function($scope, CentralService) {
$scope.data = CentralService.centralData;
setTimeout(CentralService.getData, 2000);
});
答案 2 :(得分:2)
在控制器内进行XHR调用不是最佳做法。在工厂中将其分开并注意不要重复呼叫如果您有可用的数据。您的服务应完全控制何时命中服务器以获取数据。控制器只应访问该服务。
我可能会这样做:
App.factory('eywa', ['$http', function($http) {
var eywaFactory = {};
eywaFactory.data = '';
eywaFactory.load = function() {
this.data = $http.get('./assets/js/angularxml/courseDef.xml').then(function(data) {
return x2js.xml_str2json(data);
});
return this.data;
};
eywaFactory.get = function() {
return this.data === '' ? this.load() : this.data;
};
return eywaFactory;
}]);
并在控制器内调用服务:
App.controller('MainCtrl', function($scope, eywa) {
eywa.get().then(function(data) {
$scope.courseDef = data;
});
});