Question

在我的项目中，我希望只有在这些页面上的请求完成后才能加载页面。例如，我有一个包含ng-init到getArtistsInfo的视图。我希望只有在getArtistsInfo请求加载后才能显示包含ng-init的页面：

T1

要向后端api发出请求，我使用资源：

<div class="row" ng-controller="ArtistController" ng-init="getArtistInfo(params)">
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> 
        <img ng-src="{{ artist.image_url }}" alt="{{ artist.name }}">
    </div>
    <div class="col-lg-10 col-md-10 col-sm-9 col-xs-8">
        {{ artist.bio }}
    </div>
</div>

在控制器中我有：

angular.module('ArtistService', []).factory('Artist', ['$resource',
    function ($resource) {
        return $resource('/api/artists/:artistId', {
          artistId: '@id'
        }, 
        {
            getArtistInfo: {
                method: 'GET',
                url: '/api/artists/getArtistInfo'
            }
        });
    }
]);

如何在收到getArtistInfo请求的响应后才能加载整个页面？我尝试在$ routeProvider中使用resolve，但这似乎不起作用。非常感谢你！

Answer 1

您使用ngRoute模块？在这种情况下，您可以添加resolve参数来加载艺术家信息（请参阅：https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider）。如果resolve参数返回一个promise事件（$ resource执行此操作），路由器会等待解析promise，所以在你的情况下，它会等到艺术家信息被加载：

$routeProvider.when('...', {
    controller: 'ArtistController',
    // ...
    resolve: {
        artist: ['Artist', '$route', function(Artist, $route) {
            return Artist.getArtistInfo($route.current.params).$promise;
        }]
    }
})

并在控制器中使用加载的艺术家：

.controller('ArtistController', [..., 'artist', function(..., artist) {
    $scope.artist = artist; // This is the loaded artist
}]);

AngularJS仅在加载$ resource之后加载视图

1 个答案: