我的控制器中有一个巨大的json对象,我想要将其分离到一个单独的文件中。到目前为止,我这样做:
myApp.controller('smController', ['$scope', function($scope) {
...
var stadtmobilRates = {
classic: {
A: {
night: 0,
hour: 1.4,
day: 21,
week: 125,
km000: 0.2,
km101: 0.18,
km701: 0.18
},
...
}
};
我在Stackoverflow上使用了工厂和承诺,如here所述:
myApp.factory('stadtMobilRates', function($http) {
var promise = null;
return function() {
if (promise) {
// If we've already asked for this data once,
// return the promise that already exists.
return promise;
} else {
promise = $http.get('stadtmobilRates.json');
return promise;
}
};
});
myApp.controller('smController', ['$scope', function($scope, stadtMobilRates) {
var stadtmobilRates = null;
stadtMobilRates().success(function(data) {
stadtmobilRates = data;
});
现在我在TypeError: undefined is not a function
行获得了stadtMobilRates().success(function(data) {
。尽管我已将stadtMobilRates
工厂注入控制器,为什么不接受它?
编辑#1:我已按照prawn的建议将工厂名称添加到数组中。
myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {
var stadtmobilRates = null;
stadtMobilRates().success(function(data) {
stadtmobilRates = data;
});
console.log(stadtmobilRates);
然而stadtmobilRates是null
?
编辑#2:我已在Plunker上创建了应用的简化版本。好吧它有效。在完整的应用中,我使用不同的路线,其中stadtmobilRates
仍然是null
。我无法使用路线创建完整应用的Plunker。所以这是GitHub上的完整代码。上面的代码来自Line 159。我想这与我的路线有关?
答案 0 :(得分:6)
您忘记在数组中传递工厂的名称。通常,您传递一个数组,其元素由一个字符串列表后跟函数本身组成。确保数组与函数声明中的参数保持同步。这样,注入器知道要注入函数的服务。
myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {
修改强>
我就是这样做的...当使用路由时,我喜欢使用resolve
,因此数据会被加载一次并被存储。所以在$routeProvider
中,我会将smController部分更改为以下内容......
when('/sm', {
templateUrl: 'partials/sm.html',
controller: 'smController',
resolve:{
load:function(stadtMobilRates){
return stadtMobilRates.LoadData();
}
}).
我也修改了工厂
myApp.factory('stadtMobilRates', function ($q, $http) {
var mobilRates = null;
function LoadData() {
var defer = $q.defer();
$http.get('stadtmobilRates.json').success(function (data) {
mobilRates = data;
defer.resolve();
});
return defer.promise;
}
return {
GetData: function () { return mobilRates ; },
LoadData:LoadData
}
});
因此,在加载此路由之前,它将在工厂中调用LoadData
函数。加载数据后,它会解析承诺,因此只会调用此LoadData
函数一次。一旦承诺解决,它将继续并加载视图。
所以现在在你的控制器中,无论何时你想获取数据,你所要做的就是调用函数GetData
myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates)
{
var stadtmobilRates = stadtMobilRates.GetData();
});