我遇到的问题是模板加载早于 Controller 中的参数,因此用户看到的是空 block 。
Controller :
app.controller('mainDashboardApi', ['$scope', '$http',
function($scope, $http) {
$http.get('api/dashboard/main').success(function(data) {
$scope.dashboard = data;
});
}
]);
路由器:
$stateProvider
.state('dashboard', {
url: "/dashboard",
templateUrl: "dashboard",
controller: 'mainDashboardApi'
})
如何在参数加载完成后加载模板?
最佳答案
您可以做很多事情。
您可以隐藏空 block ,并仅在数据加载时显示它们:
app.controller('mainDashboardApi', ['$scope', '$http',
function($scope, $http) {
$scope.isLoading = true;
$http.get('api/dashboard/main').success(function(data) {
$scope.dashboard = data;
$scope.isLoading = false;
});
}
]);
那将是手动方式。
但是 ui.router
支持这种场景(ngRoute
也是如此),带有状态的 resolve
参数,您可以在其中延迟加载 View 直到所有 promise 都已解决(或其中一个被拒绝):
$stateProvider
.state('dashboard', {
url: "/dashboard",
templateUrl: "dashboard",
controller: 'mainDashboardApi',
resolve: {
dashboard: function($http){
return $http.get('api/dashboard/main')
.then(function(response){
return response.data;
})'
}
}
})
然后,可以将 dashboard
注入(inject)(就像您注入(inject)其他服务一样)到 mainDashboardApi
Controller 中:
app.controller('mainDashboardApi', ['$scope', 'dashboard',
function($scope, dashboard) {
$scope.dashboard = dashboard;
}
]);
关于javascript - Controller 完成参数加载后如何以 Angular 加载模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30202232/