我仍然在agnularjs周围抓住我的头，所以我的问题可能存在缺陷，但是有可能延迟控制器的执行直到加载JSON文件（在其他功能中）？
这是控制器：
app.controller('progressCtrl', ['$scope', '$routeParams', '$http', 'content', function($scope, $routeParams, $http, content) {
function initScope() {
$scope.pageId = $routeParams.pageId;
$scope.totalPages = 0;
content.success(function(data) {
$scope.pages = data;
angular.forEach($scope.pages, function(value, key) {
if ($scope.totalPages <= value.id) $scope.totalPages = value.id;
if ($scope.pageId == value.id) {
value.class = "active";
} else {
value.class = "";
}
if (incompleteObjectives.length>0) {
var matchFound = false;
for (var i=0;i<incompleteObjectives.length-1;i++) {
if (incompleteObjectives[i].indexOf('page-'+value.id+'-')) {
matchFound = true;
}
}
if (!matchFound) {
value.class += " completed";
}
} else {
value.class += " completed";
}
});
});
}
initScope();
}]);
这是称为" getData"功能的工厂，这是加载JSON文件的地方...
/*Factory that runs http.get on content.json, used by multiple controllers */
app.factory('content', ['$http', function($http) {
var url = 'json/content.js';
return $http.get(url)
.success(function(data) {
for (var i = 0; i < data.length; i++) {
numberOfPages += 1;
}
// load page .js files
var tempData = getData(0);
for (var i = 1; i < numberOfPages; i++) {
(function(i) {
tempData = tempData.then(function() {
return getData(i);
});
}(i));
}
return data;
})
.error(function(data) {
return data;
});
}]);
// loads individual page data, stores in pageData
function getData(id) {
return $.ajax({
url: 'json/page' + (id + 1) + '.js',
dataType: 'json'
}).done(function(d) {
if(firstRun)
addPageObjectives(id, d)
// push data into pageData array, for use later when pages are routed to
console.log("pushing page data into pageData for page "+id);
pageData.push(d);
}).fail(function() {
// console.log('ERROR loading page index ' + id);
});
}
为了完成，这是Angular HTML，它具有NG类：
<div ng-if="content.titletext!=undefined" class="sidetitle" ng-controller="progressCtrl">
<div class="container">
<div>
{{content.titletext}}
</div>
<div class="progress-buttons">
<div ng-repeat="(skey,page) in pages" class="button {{skey+1}}" ng-class="page.class" ng-attr-id="{{'nav-'+(skey+1)}}">
<div ng-switch="page.titletext || '_undefined_'">
<span ng-switch-when="_undefined_">{{skey+1}}</span>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-if="content.chapterTitleText!=undefined" class="side-chapter-title">
{{content.chapterTitleText}}
</div>
<div class="progress-pages">
<span>{{pageId}} of {{totalPages}}</span>
</div>
</div>
</div>
最终是我要访问的PageData数组，但是，在Progress Controller仅运行第一个JSON文件已加载的时间，因此我只能从第一页访问详细信息。我想在加载所有JSON文件时运行pregendController中的代码 - 并且仍然可以访问value.class属性。
可能吗？
谢谢。
更新
从下面的答案中，这是我尝试的。我知道以下内容是错误的，但是如果可能的话，我想了解一些错误的提示。
/*Factory that runs http.get on content.json, used by multiple controllers */
app.factory('content', ['$http', function($http) {
var promise;
var url = 'json/content.js';
function init() {
console.log("Good news! content factory init function does get called!");
promise = $http.get(url).then(function success(data) {
for (var i = 0; i < data.length; i++) {
numberOfPages += 1;
}
console.log("data.length = "+data.length); // this outputs as 'undefined'; I'm not sure why, given loading was, presumably, successful
// load page .js files
var tempData = getData(0);
for (var i = 1; i < numberOfPages; i++) {
(function(i) {
tempData = tempData.then(function() {
return getData(i);
});
}(i));
}
return data;
}); // I took off the .error lines because they threw an error - I'm assuming the syntax didn't match the new 'success' syntax above
}
init(); // I added this - not sure if that's right, but otherwise the init function didn't run...
function getData(id) {
return $.ajax({
url: 'json/page' + (id + 1) + '.js',
dataType: 'json'
}).done(function(d) {
if(firstRun)
addPageObjectives(id, d)
// push data into pageData array, for use later when pages are routed to
console.log("pushing page data into pageData for page "+id);
pageData.push(d);
}).fail(function() {
// console.log('ERROR loading page index ' + id);
});
return promise;
}
// public API
return {
getData: getData
}
}]);
在其他地方，在控制器中，我正在使用行，例如：
content.getData().then(function(data) {
....
}
...要访问页面数据（我认为这是不起作用的）。我猜想在很多地方此更新是错误的，但是如果人们愿意提供帮助，那就太好了。再次感谢。
在页面出现之前加载数据，可以在您的配置中使用 Resolve 完成。
只需通过添加功能并在配置中调用函数并将其调用，将您的工厂/服务转换为溶要。
$routeProvider
.when("/", {
templateUrl : "...",
controller : "...",
resolve : {
resolved_data: function resolveData($routeParams) {
return content.resolveData($routeParams.pageId);
}
}
})
然后，您的控制器可以从中获取结果：
app.controller('progressCtrl', ['resolved_data', ... function( resolved_data, ... ){
$scope.some_content = resolved_data.data;
...
}])'
由于它从$http返回数据，因此控制器应处理承诺：
app.controller('progressCtrl', ['resolved_data', ... function( resolved_data, ... ){
resolved_data.then((res)=>{
$scope.some_content = res.data;
});
...
}])'
我的建议是在您的内容工厂中公开一个getData功能，以返回数据结果的承诺。您可以使用$ Q服务来汇总您的PageData HTTP调用。
app.factory('content', ['$http', '$q', function($http, $q) {
var promise;
var url = 'json/content.js';
function init() {
promise = $http.get(url).then(function success(data) {
var numberOfPages = 0;
var dataRequests = [];
for (var i = 0; i < data.length; i++) {
numberOfPages += 1;
}
// load page .js files
for (var i = 0; i < numberOfPages; i++) {
dataRequests.push(fetchPageData(i));
}
return $q.all(dataRequests).then(function (pageData) {
/* pageData is an array of results from fetchPageData calls */
return pageData;
});
});
}
function fetchPageData(id) {
return $http({
method: 'GET',
url: 'json/page' + (id + 1) + '.js',
responseType: 'json'
}).then(function(d) {
return d;
}, function(error) {/*handle error*/});
}
function getData () {
return promise; /* this is the pageData result from $q.all above */
}
init();
// public API
return {
getData: getData
}
...
在您的控制器中：
content.getData().then(function(data) {
//do stuff here
})