Angular，停止渲染直到获得异步数据

Question

我有关于 AngularJS 的问题。我想为某些数组制作 ng-repeat。但是我从控制器中的 firebase 获得了这个数组的数据。问题是，当页面呈现时，我仍在等待来自从 firebase 获取数据的异步函数的数据。

最好的控制方法是什么？我尝试使用 promise，但出了点问题，页面在我从 firebase 获取数据之前就已呈现。

即

$scope.games = [];
    function getOnce(){
        var defer = $q.defer();
        ref.once("value", function(data) {
            defer.resolve();
            $scope.games.push('test');
        });
        return defer.promise;
    }

    $scope.getdata = getOnce().then(function(data){
        console.log('success');
        console.log(data);

    });

然后我在初始化时调用了'$scope.getdata'函数'data-ng-init="getdata()"' 我在这里错了什么？或者我怎样才能达到我的目标？

Answer 1

好吧，您可以使用 ng-show 来隐藏您不想在加载数据时看到的页面部分。或者 ng-if 如果您的指令要求在它们的 link/controller function 是运行 by angular 时加载数据。

符合您的需求吗？

您需要公开是否已完成向 $scope 的加载，如下所示：

$scope.isDoneLoading = false;
$scope.getdata = getOnce().then(function(data){
    // ...
    $scope.isDoneLoading = true;
});

那你就这样做：

ng-if="isDoneLoading"

或者这个，看你的需要：

ng-show="isDoneLoading"

Answer 2

在解析方法中传递数据。然后用数据响应填充数组。

$scope.games = [];
    function getOnce(){
        var defer = $q.defer();
        ref.once("value", function(data) {
        defer.resolve('test');
    });
    return defer.promise;
}

$scope.getdata = getOnce().then(function(data){
    $scope.games.push(data);
    console.log('success');
    console.log(data);
});

Angular，停止渲染直到获得异步数据

Angular, stop rendering until get async data

javascript

angularjs

angular-promise