AngularJS: Der Controller protokolliert die http-Antwort der Factory als "undefined"

Question

Ich möchte, dass meine HTTP-Antwortdaten dem Controller zur Verfügung stehen, um JSON-Daten in der View-Direktive ({{tipp}}) anzuzeigen. Während ich jedoch in der Steuerung Daten von der Fabrik protokollieren kann, werden die Daten nicht in brauchbarer Weise zur Verfügung gestellt.

Wenn das, was von der Fabrik zur Verfügung gestellt wird, in der Steuerung protokolliert wird, ist es entweder "undefined" oder "keine Funktion". Aus dem folgenden Code wird „undefiniert“ angemeldet“

Bitte helfen Sie mir Recht, meine Verfehlungen Wie reinige ich dies, also als Fabrik .get Daten in der Steuerung verwenden

Controller:?

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

MainCtrl.controller('Ctrl2', [ "QuizViewServ", '$log', '$scope', 
function(QuizViewServ, $log, $scope){ 


$scope.init = function(){ 
    $scope.hint = "FooBar"; //Testing binding bw Ctrl2 & the view 
    $log.log(QuizViewServ.getQuizData.quizQz); // <-LOGS AS "UNDEFINED" 
} 

}]); 

Factory:.

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

MainServ.factory('QuizViewServ', ['$http', function($http){ 
console.log("factory working"); 

var getQuizData = function(){ 

    $http({ 
     method: 'GET', 
     url: '/assets/json.json' 
    }).then(function successCallback(response) { 
     console.log("inside successgul GET req"); 


     var quizQz; 
     quizQz = response.data.quizQs; 
     console.log(quizQz); 


    }, function errorCallback(response) { 

     alert("Trouble grabbing requested data.") 
    }); 
    } 
    return { 
    getQuizData : getQuizData 
    } 

}]); 

Answer 1

$ http Versprechen verwendet das Ergebnis zurück, wenn QuizViewServ.getQuizData.quizQz verwenden, sind Sie lo gging nichts, da es asynchron ist.

In Ihrer Fabrik, geben Sie das Versprechen zurück, und in Ihrem Controller, behandeln Sie es.

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

MainServ.factory('QuizViewServ', ['$http', function($http){ 
console.log("factory working"); 

var getQuizData = function(){ 

    return $http({ 
     method: 'GET', 
     url: '/assets/json.json' 
    }) 
    } 
    return { 
    getQuizData : getQuizData 
    } 

}]); 

und in Ihrem Controller

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

MainCtrl.controller('Ctrl2', [ "QuizViewServ", '$log', '$scope', 
function(QuizViewServ, $log, $scope){ 


$scope.init = function(){ 
    $scope.hint = "FooBar"; //Testing binding bw Ctrl2 & the view 

    QuizViewServ.getQuizData().then(function(result){ 
     $log.log(result.data); 
    }); 
} 

}]); 

Answer 2

Sie müssen diese Daten retrun. Es ist nicht möglich, wie Sie es tun. Auch quizQz Eigenschaft ist privat. Sie können nicht darauf zugreifen, auch nachdem dieser Wert nach einem AJAX-Aufruf festgelegt wurde.

var getQuizData = function(){ 

return $http({ 
    method: 'GET', 
    url: '/assets/json.json' 
}).then(function successCallback(response) { 
    console.log("inside successgul GET req"); 


    var quizQz; 
    quizQz = response.data.quizQs; 
    console.log(quizQz); 
    return quizQz; 

    }, function errorCallback(response) { 

    alert("Trouble grabbing requested data.") 
    return ''; 
}); 

}

und in der Steuerung, erhalten Daten wie folgt.

QuizViewServ.getQuizData().then(function(data){ 
    console.log(data); 
});