与UI的路由器
问题描述:
我有一个应用程序在我的主状态,使下决心,使HTTP调用,并获取数组做出决议时机不好或命令的功能。与UI的路由器
然后,孩子阵列应该显示此数组中一个对象,但似乎来自控制器的变量太早定义,不得到正确更新,等孩子出来空。
我已经试过了没有HTTP调用(var array = [array]
),它工作正常,但不能与HTTP调用。
关于如何解决此问题的任何提示?
这里的控制器:
.controller('appCtrl',['$scope', 'SearchService','fair', function($scope, SearchService, fair){
$scope.data = SearchService;
$scope.datafairs = $scope.data.flatexhibitors;
console.log($scope.datafairs);
}])
.controller('ChildController',['$scope', 'exhibitor', '$filter', function($scope, exhibitor, $filter){
$scope.$watch(function() { return $scope.fair; }, function(newVal) {
$scope.fairs = newVal;
console.log($scope.fairs);
$scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
}, true);
}])
服务:
.factory("SearchService", function($http) {
var service = {
flatexhibitors : [],
datafairs : [],
getAllExhibitors : function (wop) {
var searchindex = wop;
console.log(searchindex);
var url = '../register/backend/databaseconnect/getexhibitors.php';
var config = {
params: {
search: searchindex
},
cache:true
};
$http.get(url, config).then(function (data) {
service.datafairs = data.data.rows;
for (var i in service.datafairs) {
service.flatexhibitors.push(service.datafairs[i].doc);
};
return service.flatexhibitors;
});
}
}
return service;
})
和各州:
.config(function($stateProvider) {
$stateProvider.state('berliner', {
url: '/berlinerliste',
params : {search: 'Berliner 2017'},
resolve: {
fair: function(SearchService, $stateParams) {
return SearchService.getAllExhibitors($stateParams.search);
}
},
views: {
'header': {
templateUrl: 'header.htm'
},
'main':{
templateUrl: 'bl2017.htm',
controller: 'appCtrl'
}
}
})
.state('berliner.exhibitor', {
url: '/{id}',
resolve: {
exhibitor: function($stateParams) {
var slug = $stateParams.id;
return slug;
}
},
views: {
'header': {
templateUrl: 'header.htm'
},
'wop':{
templateUrl: 'exhibitor.htm',
controller: 'ChildController'
}
}
})
})
我已经成功地复制这一问题在Plunkr。
答
更改getAllExhibitors
返回一个promise
象下面这样:
getAllExhibitors : function (wop) {
var searchindex = wop;
console.log(searchindex);
var url = '../register/backend/databaseconnect/getexhibitors.php';
var config = {
params: {
search: searchindex
},
cache:true
};
return $http.get(url, config).then(function (data) {
service.datafairs = data.data.rows;
for (var i in service.datafairs) {
service.flatexhibitors.push(service.datafairs[i].doc);
};
return service.flatexhibitors;
});
}
这是一个反...查看:?什么是明确的承诺,建设反模式,如何避免它(HTTPS: //*.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) – charlietfl
谢谢你的评论。如果在解决响应之前没有对响应执行聚合/转换逻辑,则它只是一种反模式。例如,如果在上面的代码中,我们在成功地立即解析了响应而没有对响应执行任何计算,它可能被认为是反模式,并且被$ http调用中的简单返回代替。但是,在这种情况下,我们有循环逻辑需要在解决之前对响应执行。这保证需要使用$ q.defer() – CodeWarrior
不,它不需要。可以用'then()'方法很容易地操作,只需要'return service.flatexhibitors'。有没有必要额外在这种情况下推迟,它显然属于反模式,如图 – charlietfl