如何在Angular Js上完成ajax之前加载视图？

Question

我正在使用Angular Js中的Ionic框架构建一个ios应用程序。 在我的应用程序中跟随我的路由示例

.state('app.friends', { url: '/friends', cache: false, requireLogin: true, views: { 'menuContent': { templateUrl: 'templates/friends.html', controller: 'friendsCtrl' } } })

这里我加载了一个模板friends.html，它的控制器是friendsCtrl。在friendsCtrl我有一个ajax函数，它调用api并获取json格式的朋友列表。 我遇到的问题是我的模板在ajax完成之前不会加载到视图中。有时api上有大量数据需要很长时间。所以我想在ajax完成之前显示空视图。我在视图渲染之前看到了许多关于完成ajax的问题​​和答案，但在我的情况下，我想在ajax完成之前渲染视图。怎么做请建议我。

由于

Answer 1

您可以使用延迟对象（$ q）来实现此目的，请参阅https://docs.angularjs.org/api/ng/service/ $ q

或者，您可以通过将其包装在超时函数（$ timeout）附近来强制加载发生 - 请参阅https://docs.angularjs.org/api/ng/service/ $ timeout

修改

someFunc () {
    $scope.somevar = {};
    $http.get('url').then(
        function(response){
            $scope.someVar = response.data;
        });
    return $scope.somevar;      // returns {}
}

======================================

    someFunc () {
        var deferred = $q.defer();
        $http.get('url').then(
            function(response){
                $scope.someVar = response.data;
                deferred.resolve();
            });
        return deferred.promise;    // return a promise to set someVar
    }

    var $scope.somevar = {};
    someFunc().then(
        function() {
            console.log("somevar is set");
        });