AngularJS AppCtrl attendi che l'evento HTTP abbia successo

Question

Sono tutto nuovo in AngularJS e ho bisogno di aiuto, ho un "AppCtrl" e da lì ho una chiamata al servizio web HTTP e ho bisogno della risposta alla chiamata del servizio web accessibile negli altri miei controller .

angular.module('starter.controllers', []) 

.controller('AppCtrl', function($scope, $http) { 

    $scope.webservice_url = "http://webserviceurl.com/"; 

    $http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) { 
     $scope.stations = data.stations; 
    }); 
}) 

Questo funziona bene - e posso accedere ai $ scope.stations nei miei modelli - ma ora voglio per accedere ai $ scope.stations nel mio controller "PlaylistCtrl", ma questo non è definito :(

.controller('PlaylistCtrl', function($scope, $stateParams) { 
    console.log($scope.stations); // is undefined :(
}) 

Come posso fare in modo la chiamata http è "fatto" (successo) prima della "PlaylistCtrl" viene caricato ...

Answer 1

si dovrebbe trasformare il http in servizio/fabbrica, se possibile,

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, dataService) { 
    dataService.then(function (data) { 
    $scope.data = data 
    }) 
}); 


app.controller('SecondCtrl', function($scope, dataService) { 
    dataService.then(function (data) { 
    $scope.secData = data 
    }) 
}); 

app.service('dataService', function ($http, $q){ 
    var defferer = $q.defer() 

    $http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').success(function (data){ 
    defferer.resolve(data) 
    }) 

    return defferer.promise 
}) 

http://plnkr.co/edit/8k97DngZ8KoFOBPFJG82?p=preview esempio di lavoro

Answer 2

$scope.stations ist non undefined nel PlayListCtrl perché la chiamata HTTP non è terminata, ma perché PlayListCtrl ha un diverso $scope rispetto a AppCtrl.

Si dovrebbe mettere la chiamata webservice in un servizio e iniettare il servizio che in tutti i controller che lo richiedono.

Answer 3

// Make a remote request. 
$http.get('some wonderful URL for a service').success(function (results) { 
    superImportantInfo = results; 

    semaphore = true; 
}); 

while (!semaphore) { 
    // We're just waiting. 
} 

In questo modo si può lasciare il controller di attendere fino a che non termina l'esecuzione del regolatore 1 e prima di passare al controllore successivo.

Spero che questo aiuto!

Answer 4

In Angular, non si aspettano dati prima del rendering. Lo lasci renderizzare, anche se inizialmente la matrice è vuota, e quindi una volta che i dati sono tornati, esegui nuovamente il rendering. Angolare fa questo per mantenere un alto livello di reattività. È di progettazione e non qualcosa che dovresti provare a cambiare.

Tutto quello che devi fare per risolvere il tuo variabile non definita è inizializzare la variabile stations ambito nel controller. Anche se viene sovrascritto quando i dati torna dal vostro servizio, non importa perché angolare guarderanno per le modifiche alla variabile d'applicazione, dal riferimento e aggiornare tutte le viste quando lo fa.

angular.module('starter.controllers', []) 

.controller('AppCtrl', function($scope, $http) { 

    $scope.webservice_url = "http://webserviceurl.com/"; 

    $scope.stations = []; 
    $http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) { 

     $scope.stations = data.stations; 
    }); 
}) 

nel controller interno, se i dati non sono ancora tornato, $ scope.stations sarà un array vuoto:

.controller('PlaylistCtrl', function($scope, $stateParams) { 
    console.log($scope.stations); // is [] 
    $scope.$watch('stations', function(newVal) { 
     alert('data returned!! updating views!'); 

    }); 
}) 

volta i ritorni di dati, il riferimento di matrice sulla portata è sovrascritto, qualsiasi gestore di $ watch viene chiamato per aggiornare la vista.