CODEWITHSUNDEEP
javascriptangularjsangular-promise
Filip
Filip

Reputation: 105

Angular, stop rendering until get async data

I have question regarding AngularJS. I want to make ng-repeat for some array. But data for this array i get from firebase in controller. Problem is, when page is rendering, iam still waiting for data from async function which get data from firebase.

What is the best way to control it? I tried to used promisses, but something was wrong and page was rendered before i got data from firebase.

i.e

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

    });

And i call '$scope.getdata' function on init 'data-ng-init="getdata()"' What i wrong here? Or how can i get my goal?

Upvotes: 2

Views: 2150

Answers (2)

Emir Marques
Emir Marques

Reputation: 2687

Pass data in method resolve. In then populate the array with data response.

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

Upvotes: 2

Jesus is Lord
Jesus is Lord

Reputation: 15399

Well you could use an ng-show to just hide the parts of the page you don't want visible while you're loading the data. Or ng-if if your directives require that the data be loaded when their link/controller functions are ran by angular.

Does that suit your needs?

You'd need to expose whether or not you're done loading to the $scope with something like this:

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

Then you would just do this:

ng-if="isDoneLoading"

Or this, depending on your needs:

ng-show="isDoneLoading"

Upvotes: 0

Related Questions