AngularJS等待數據呈現視圖？

Question

我正在研究angularJS，但我仍然是初學者...而我有一個簡單的問題，我希望你能回答。使用location.path

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
    controller:'ListCtrl', 
    templateUrl:'list.html' 
    }) 
    .when('/update/:itemId', { 
    controller:'UpdateCtrl', 
    templateUrl:'update.html' 
    }) 
    [...] 
    .otherwise({ 
    redirectTo:'/' 
    }); 
}); 

從「名單」的觀點，我重新根「更新」的觀點：

app.controller('ListCtrl', function($scope, albumFactory, $location, $http) { 
    $scope.albums = albumFactory.getList().then(function(albums){ 
     $scope.albums = albums; 
    }); 
    [...] 
    $scope.updateAlbum = function(index) { 
     console.log('updateAlbum()'); 
     $location.path("/update/" + $scope.albums.albums[index].id); 
    } 

在更新

我得到了以下路由控制器我需要首先檢索細節以預先填充視圖。爲此，我使用的工廠如下：

app.controller('UpdateCtrl', function($scope, albumFactory, $location, $routeParams, $http) { 

    $scope.album = albumFactory.get($routeParams.itemId).then(function(album){ 
     $scope.album = album; 
    }); 

所以我的問題是視圖首先呈現（顯示）爲空。一旦來自工廠的Ajax調用完成，作用域就會更新並且視圖被填充。

是否可以在渲染局部視圖之前等待工廠回覆？ 或者我做錯了什麼？

的目的是爲了避免在很短的時間，其中的觀點是空的......（不是真正用戶友好的）

Answer 1

您需要使用$route緩解。

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
    controller:'ListCtrl', 
    templateUrl:'list.html' 
    resolve : { 
     resolvedAlbums: function(albumFactory) { 
     return albumFactory.getList(); 
     } 
    } 
    }), 
    .when('/update/:itemId', { 
    controller:'UpdateCtrl', 
    templateUrl:'update.html', 
    resolve : { 
     // you can inject services in resolves, in this case you also need `$route` 
     // to get the `itemId` 
     resolvedAlbum: function(albumFactory, $route) { 
     return albumFactory.get($route.current.params.itemId); 
     } 
    } 
    }) 
}); 

您可以再注入所解析數據這樣的控制器內部：

app.controller('ListCtrl', function($scope, resolvedAlbums) { 
    $scope.albums = resolvedAlbums; 
    ... 
}); 

app.controller('UpdateCtrl', function($scope, resolvedAlbum) { 
    $scope.album = resolvedAlbum; 
    ... 
}); 

的觀點不會改變，直到數據到達後（承諾解決）。