我的控制器有一个附加到$ scope的原型实例,当用户打开页面时,该实例具有一些初始值。如果用户单击选项卡,则会调用一个服务从外部服务中提取数据,扩展原型并替换同一控制器的$ scope中的实例。所有子选项卡都使用相同的控制器。但是,$ scope中的更改不会反映在视图中,但只有当用户再次单击该选项卡时,他才能看到之前提供的更改。
控制器代码:
$scope.analysis = $stateParams.analysis;
$scope.changeTab = function (tabName) {
$scope.selectedTab = tabName;
if (tabName === 'table' && typeof $scope.datatable === 'undefined') {
AnalysisManager.initializeDataForTab($scope.analysis.id, tabName).then(function(data){
$scope.analysis=data;
$state.go('analyses-details.' + tabName);
服务代码:
self.initializeDataForTab= function (analysisid, tabName) {
if(tabName==='table'){
return self.initializeAnalysisDataTable(analysisid);
}
};
self.initializeAnalysisDataTable=function(analysisid){
var deferred = $q.defer();
var instance=self.retrieveAnalysis(analysisid);
var method='tms/job/'+analysisid+'/datatable';
$site.get(method,{},{}).then(function(data){
var datatable=new AnalysisDataTable();
var tablerows=data.rows;
datatable.rows=[];
datatable.header=[];
angular.forEach(tablerows, function(row){
var newColumns=[];
angular.forEach(row.columns, function(column){
if(datatable.header.indexOf(column.name)===-1){
datatable.header.push(column.name);
}
newColumns.push({name:column.name,value:column.value});
});
datatable.rows.push({textid:row.textid, columns:newColumns});
});
instance.datatable=datatable;
deferred.resolve(instance);
});
return deferred.promise;
};
国:
.state('analyses-details', {
abstract: true,
url: '/analyses',
params: {
analysis: null
},
templateUrl: 'views/analyses/analyses.details.html',
controller: 'AnalysisDetailsController'
})
.state('analyses-details.table', {
url: '/table',
parent: 'analyses-details',
templateUrl: 'views/analyses/analyses.details.table.html'
})
我发现了几个类似的帖子,其中$ scope。$ apply()或$ timeout已被提议作为解决方案,但它对我不起作用。
修改
我已经通过这种方式解决了问题,我将导航更改为其他选项卡,因此我将数据作为参数发送,因此它在控制器中再次初始化。
$state.go('analyses-details.'+tabName,{
analysis: $scope.analysis
});