如何在 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");
        });