Question

我正在研究angularJS，但我还是初学者......我有一个简单的问题，我希望你能回答。

我得到了以下路由：

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

在“List”视图中，我使用location.path重新root到“Update”视图：

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);
    }

在Update Controller中，我首先需要检索细节以预先填充视图。为此，我使用的工厂如下：

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;
  ...
});

直到数据到达后才会更改视图（保证已解决）。

AngularJS等待数据呈现视图？

1 个答案: