Wait until scope variable is loaded before using it in the view

Hi, I need your help, i need to wait until scope or rootscope is fully loaded before using in to display data in a list in a view.
But i don’t know how, i have a side-menu app, and the app can’t wait and i have empty pages.

You could use a loader (with $ionicLoading for example), to load all your data.
Fisrt you show it, then you process your variables, and finally, you hide it.

no my friend…i’ll tried
$timeout(function() {
$rootScope.chiamataUno();
}, 10000);

but $rootScope.chiamataUno(); still load and blank page

What kind of data are you getting ? Is it a huge list, and how long should it take to get it ?

is a small json for now, I create this json by myself for test, but after it comes from an huge json from http.get…I know that there is the promise, but i need a way to wait untill scope is fully loaded

Have you tried calling your method $rootScope.chiamataUno(); just after you get your http ?

right question, i need to do this function at login, so the logic is

  • do login
  • spinner for loading
  • load data in scope(query)
  • scope fully loaded
    -close login.html
    -hide spinner
    -show list

the http.get is the function chiamataUno();

Are you sure your http.get works ? can you log it on .success ?

If this work, can you confirm the promise sends the right data to your afterLogin page?

yes it works…for now is just a jsno for test but it will work… the http.get it will be like this

var authdata = Base64.encode(“DEMVSINT_ADMIN” + “:”+ “Password01”);
$http.defaults.headers.common[“Authorization”] = "Basic "+ authdata;$http.get(‘http://demvsint-as1-sd.services.eni.intranet:8001/CaseManager/P8BPMREST/p8/bpm/v1/queues/DV_ResponsabileBSDL/workbaskets/Responsabile BSDL/queueelements/?cp=DCMSVS_CONN1’)
.success(
function(response) {

console.log(response);

var newArray = [];
$rootScope.newObjectJSON = [];
$scope.newObject = [];

for (var i = 0; i < response.queueElements.length; i++) {

var newObject = {
caseFolderId : response.queueElements[i].caseFolderId.replace("{", “”).replace("}", “”),
caseTaskId : response.queueElements[i].caseTaskId.replace("{", “”).replace("}", “”),
stepName : response.queueElements[i].stepName,columns : response.queueElements[i].columns,
DV_Caseidentifier_for_eni_OdA : response.queueElements[i].columns.DV_Caseidentifier_for_eni_OdA,
DV_EBELP_ODA : response.queueElements[i].columns.DV_EBELP_ODA,
DV_EINDT_ODA : response.queueElements[i].columns.DV_EINDT_ODA,
DV_MATNR_TXZ01_POS_ODA : response.queueElements[i].columns.DV_MATNR_TXZ01_POS_ODA,
DV_NAMECL_POS_ODA : response.queueElements[i].columns.DV_NAMECL_POS_ODA,
DV_NETPR_WAERS_POS_ODA : response.queueElements[i].columns.DV_NETPR_WAERS_POS_ODA,
DV_PEINH_POS : response.queueElements[i].columns.DV_PEINH_POS,
DV_MENGE_MEINS_POS_ODA : response.queueElements[i].columns.DV_MENGE_MEINS_POS_ODA
};

the problem is that this are in a controller and i don’t know how to change in service and use promise…i’m a very beginner

Well, in my actual project, I’ve got a lot of http get, so i’ll show you an example.

I call my Service from my controller every time.
The service calls the method CallWebService, which does an http POST and gets the data returned (quite the same as an http GET).
The service checks the success / error and sends the promise back to the Controller, all asynchronously.

For instance, a for a list of accounts.

Tell me if you have any questions, and hope i’m clear enough


AccountsList Controller :

 AccountsService.fn_getAccountsList() // Calls service
.success(function(data) { //on success, process data
     ... Process data coming from service.
     ... Comes from deferred.success
 })
.error(function(data) {
    ... Process data coming from service
    ... Comes from deferred.reject
});

Service.js :

.factory('AccountsService', function($q, $http, $ionicLoading, $rootScope) {
return {
    fn_getAccountsList: function(reload) {
        var deferred = $q.defer();
        var promise = deferred.promise;
        var ctx = {
            "SessionID": $rootScope.token
        };
        var input = {
            "NUMCO": $rootScope.numco,
            "CONSOLIDE": "0"
        };
            $ionicLoading.show({
                template: '<ion-spinner icon="circles" class="spinner-balanced"></ion-spinner>'
            });
        CallWebService($http, $rootScope.environnement.url, $ionicLoading, ctx, input, "S0175_SOLDE", function(response) {
                $ionicLoading.hide();

            // this callback will be called asynchronously
            // when the response is available
            if (response == null) {
                deferred.reject({
                    errorCode: -10,
                    message: $rootScope.lang.AM_ABSENCE_CONN
                });
            } else {
                if (response.ERRORS == null) {
  /************* SUCCESS HERE, the rest is error processing  **********/
                    deferred.resolve(response.OUT.Liste.Solde);
  /************* SUCCESS HERE, the rest is error processing  **********/
                } else {
                    if (response.ERRORS.InfoNumber == null)
                        deferred.reject({
                            errorCode: 0,
                            message: $rootScope.lang.LANG_SERVICE_INDISPONIBLE
                        });
                    else if (response.ERRORS.InfoNumber == -200)
                        deferred.reject({
                            errorCode: -200,
                            message: $rootScope.lang.AM_SESSIONEXPIRE + ", " + $rootScope.lang.AM_RECONNECTER
                        });
                }
            }

        });

        promise.success = function(fn) { //Sends the promise with success
            promise.then(fn);
            return promise;
        } 
        promise.error = function(fn) { //Sends the promise with error 
            promise.then(null, fn);
            return promise;
        }
        return promise;
    }
}})

Finally, my method CallWebService :

 function CallWebService(http, url, ionicLoading, ctx, input, serviceName, _callback) {
 http({
        method: 'POST',
        url: url,
        data: createJsonLoginServiceCall(serviceName, ctx, input),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        timeout: 25000
    })
    .success(_callback)
   .error(_callback);
 }

ok…many thanks…i need to study your post…thanks again for your time. I’ll reply as soon as possible

@fabiobalsamo

as per your question
after login process try this
if you are getting data from json than

  //  defined loading spinner in your app.js
  var loading_template={loading:{content: 'Loading',animation: 'fade-in', showBackdrop: true, maxWidth: 200, showDelay:0 }};

than in Controller.js

app.controller('loginCtrl', function($scope, $http, $ionicLoading){

$scope.hide_login_page = true; // show login page at running of controller

$scope.show_list =false; // hide list at initial phase

$ionicLoading.show(loading_template.loading); // spinner for loading

var req= {method: 'GET', url: 'Your _URL', headers: {'Content-Type': 'application/json; charset=utf-8'}, dataType: "json"};

    $http(req).success(function(data) {
  
        console.log(data);
$scope.result= data  // bind your model in view from here scope fully loaded.

//than hide your spinner
$ionicloading.hide();
$scope.hide_login_page = false; // hidelogin page and show list
$scope.show_list = true;

});

use ng-show = "hide_login_page" and ng-show =" show_list" in your templates accordingly

1 Like

i think this should work…but for now i don’t have the url…i need to test with my own json…but i’ll try this as soon as possibile

@fabiobalsamo

if you need a dummy json url
here it is you can use this url to show names in your view

http://www.w3schools.com/angular/customers.php

1 Like