Angular dataService.init ist keine Funktion beim Aufruf der Restfunktion

Momentan lerne ich AngularJS. Ich übe es, indem ich eine Quiz App Anleitung mache. Ich steckte fest, nachdem ich eine meiner Fabrik in einen meiner Controller injiziert hatte ... Ich konnte die Ruhefunktion der Fabrik nicht aufrufen ... Meine JSON-Daten stammen von einem Spring-Backend.Angular dataService.init ist keine Funktion beim Aufruf der Restfunktion

results.js:

(function(){ 

    angular 
     .module("quizApp") 
     .controller("resultsController", resultsController); 

    resultsController.$inject = ['quizMetrics', 'dataService']; 

    function resultsController(quizMetrics, dataService) { 
     var vm = this; 

     vm.quizMetrics = quizMetrics; 
     vm.dataService = dataService; 
     vm.activeQuestion = 0; 
     vm.reset = reset; 
     vm.getAnswerClass = getAnswerClass; 
     vm.setActiveQuestion = setActiveQuestion; 
     vm.calculatePerc = calculatePerc; 

     function getAnswerClass(index) { 
      if(index === quizMetrics.correctAnswers[vm.activeQuestion]) { 
       return "bg-success"; 
      } else if (index === dataService.quizQuestions[vm.activeQuestion].selected){ 
       return "bg-danger"; 
      } 
     } 

     function setActiveQuestion(index){ 
      vm.activeQuestion = index; 
     } 

     function calculatePerc() { 
      return quizMetrics.numCorrect/dataService.quizQuestions.length * 100; 
     } 

     function reset() { 
      dataService.init(); 
      quizMetrics.changeState("results", false); 
      quizMetrics.numCorrect = 0; 

      for(var i = 0; i < dataService.quizQuestions.length; i++) { 
       var data = dataService.quizQuestions[i]; 

       data.selected = null; 
       data.correct = null; 
      } 
     } 

    } 

})();

dataService.js:

(function() { 

    angular 
     .module("quizApp") 
     .factory("dataService", DataFactory); 

    function DataFactory($http) { 
     var vm = this; 
     vm.init = init; 
     vm.getAllQ = getAllQ; 

     init(); 

     function init(){ 
      getAllQ(); 
     } 

     var dataObj = { 
      quizData: quizData, 
      quizQuestions: [], 
      correctAnswers: [] 
     }; 

     function getAllQ(){ 
      var url = "/tenQuestion"; 
      var questionsPromise = $http.get(url); 
      questionsPromise.then(function(response){ 
       dataObj.quizQuestions = response.data; 

       for(var i = 0; i < dataObj.quizQuestions.length; i++) { 
        /*console.log("[LOG]: "+ i +". quizQuestions.solution: " + dataObj.quizQuestions[i].solution); 
        console.log("[LOG]: "+ i +". quizQuestions.solution: " + response.data[i].solution);*/ 
        dataObj.correctAnswers.push(response.data[i].solution); 
       } 

      }); 
     } 

     return dataObj; 
    } 
})();

game.html:

<!DOCTYPE html> 
<html ng-app="quizApp"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>GAME Page - KRESZ QUIZ</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head> 



<body> 
<div class="container"> 

    <div class="page-header"> 
     <form th:action="@{/questions}" method="get"> 
      <button class="btn btn-md btn-warning btn-block" type="Submit">Go Question Page</button> 
     </form> 

     <form th:action="@{/answers}" method="get"> 
      <button class="btn btn-md btn-warning btn-block" type="Submit">Go Answer Page</button> 
     </form> 


     <h1>KRESZ Quiz</h1> 
     <h3> 
      KRESZ tanulást segítő <strong>quiz</strong> alkalmazás 
     </h3> 
    </div> 

    <div ng-controller="listController as list" ng-hide="list.quizMetrics.quizActive || list.quizMetrics.resultsActive"> 
     <form class="form-inline well well-sm clearfix" > 
      <span class="glyphicon glyphicon-search"></span> 
      <input 
        type="text" 
        placeholder="Keres..." 
        class="form-control" 
        ng-model="list.search"> 


      <button class="btn btn-warning pull-right" ng-click="list.activateQuiz()"> 
       <strong>Start Quiz</strong> 
      </button> 

      <a class="btn btn-danger pull-right" method="get" th:href="@{/logout}"> 
       <strong>Logout</strong> 
      </a> 
     </form> 
     <div class="row"> 
      <div class="col-sm-6" ng-repeat="element in list.data | filter: list.search"> 
       <div class= "well well-sm"> 
        <div class= "row"> 
         <div class="col-md-6"> 
          <img ng-src="{{element.image_url}}" class= "img-rounded img-responsive well-image"> 
         </div> 
         <div class="col-md-6"> 
          <h4>{{element.type}}</h4> 
          <p><strong>Locations:</strong>{{element.type}}</p> 
          <p><strong>Locations:</strong>{{element.size}}</p> 
          <p><strong>Locations:</strong>{{element.locations}}</p> 
          <p><strong>Locations:</strong>{{element.lifespan}}</p> 
          <p><strong>Locations:</strong>{{element.diet}}</p> 

          <button class="btn btn-primary pull-right" 
            data-toggle="modal" 
            data-target="#quiz-info" 
            ng-click="list.changeActiveQuiz(element); list.dataService.getAllQ()" 
          >START</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="modal" id="quiz-info"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <h2>{{list.activeInfobox.type}}</h2> 
        </div> 
        <div class="modal-body"> 
         <div class ="row"> 
          <div class="col-xs-8 col-xs-offset-2"> 
           <img ng-src="{{list.activeInfobox.image_url}}" class="img-rounded img-responsive"> 
          </div> 
         </div> 
         <div class="row top-buffer" > 
          <div class="col-md-6"> 
           <p><strong>Locations:</strong>{{list.activeInfobox.locations}}</p> 
           <p><strong>Locations:</strong>{{list.activeInfobox.type}}</p> 
           <p><strong>Locations:</strong>{{list.activeInfobox.size}}</p> 
           <p><strong>Locations:</strong>{{list.activeInfobox.locations}}</p> 
           <p><strong>Locations:</strong>{{list.activeInfobox.lifespan}}</p> 
           <p><strong>Locations:</strong>{{list.activeInfobox.diet}}</p> 
          </div> 
          <div class ="col-xs-12 top-buffer"> 
           <p>{{list.activeInfobox.description}}</p> 
           <button class="btn btn-danger pull-right" data-dismiss="modal">Bezár</button> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div ng-controller="quizController as quiz" ng-show="quiz.quizMetrics.quizActive"> 
     <div class="row"> 
      <div class="col-xs-8"> 
       <h4>Progress:</h4> 
       <div class="btn-toolbar"> 
        <button class="btn" 
          ng-repeat="question in quiz.dataService.quizQuestions" 
          ng-class="{'btn-info': question.selected !== null, 'btn-danger':question.selected === null}" 
          ng-click="quiz.setActiveQuestion($index)"> 
          <span class = "glyphicon" 
           ng-class="{'glyphicon-pencil': question.selected !== null, 'glyphicon-question-sign': question.selected === null}" 
          ></span> 
        </button> 
       </div> 
      </div> 
      <div class="col-xs-4"> 
       <div class="row"> 
        <h4>Legend:</h4> 
        <div class="col-sm-4"> 
         <button class="btn btn-info"> 
          <span class="glyphicon glyphicon-pencil"></span> 
         </button> 
         <p>Answered</p> 
        </div> 
        <div class="col-sm-4"> 
         <button class="btn btn-danger"> 
          <span class="glyphicon glyphicon-question-sign"></span> 
         </button> 
         <p>Unanswered</p> 
        </div> 
       </div> 
      </div> 
     </div><!--progress area--> 

     <div class="row"> 
      <div class="alert alert-danger" ng-show="quiz.error"> 
       Hiba! Nem válaszoltál az összes kérdésre! 
       <button class="close" ng-click="quiz.error = false">&times</button> 
      </div> 

      <h3>Question:</h3> 
      <div class="well well-sm" ng-hide="quiz.finalise"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <h4> 
          {{quiz.activeQuestion+1 + ". " + quiz.dataService.quizQuestions[quiz.activeQuestion].text }} 
         </h4> 
           <div class="row" ng-if="quiz.dataService.quizQuestions[quiz.activeQuestion].type ==='text' "> 
            <div class="col-sm-6" ng-repeat="answer in quiz.dataService.quizQuestions[quiz.activeQuestion].possibilities"> 
             <h4 class="answer" ng-class="{'bg-info': $index === quiz.dataService.quizQuestions[quiz.activeQuestion].selected}" 
             ng-click="quiz.selectAnswer($index)"> 
              {{answer.answer}} 
             </h4> 
            </div> 
           </div> 

           <div class="row" ng-if="quiz.dataService.quizQuestions[quiz.activeQuestion].type ==='image' "> 
            <div class="col-sm-6" ng-repeat="answer in quiz.dataService.quizQuestions[quiz.activeQuestion].possibilities"> 
             <div class="image-answer" 
             ng-class="{'image-selected': $index === quiz.dataService.quizQuestions[quiz.activeQuestion].selected}" 
             ng-click="quiz.selectAnswer($index)"> 
              <img ng-src="{{answer.answer}}"> 
             </div> 
            </div> 
           </div> 
        </div> 
      </div> 
       <button class="btn btn-warning" ng-click="quiz.questionAnswered()">Tovább</button> 
       <a class="btn btn-danger pull-right" method="get" th:href="@{/logout}"> 
        <strong>Logout</strong> 
       </a> 
       </div> 

      <div class="well well-sm" ng-show="quiz.finalise"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <h3>Biztos el akarod küldeni a válaszaidat?</h3> 
         <button class="btn btn-success" ng-click="quiz.finaliseAnswers()">Igen</button> 
         <button class="btn btn-danger" ng-click="quiz.finalise = false">Nem</button> 
        </div> 
       </div> 
      </div> 

     </div> 
    </div> 

    <div ng-controller="resultsController as results" ng-show="results.quizMetrics.resultsActive"> 
     <div class="row"> 
      <div class="col-xs-8"> 
       <h2>Results:</h2> 
       <div class="btn-toolbar"> 
        <button class="btn" 
          ng-repeat="question in results.dataService.quizQuestions" 
          ng-class="{'btn-success': question.correct, 'btn-danger': !question.correct}" 
          ng-click="results.setActiveQuestion($index)"> 
          <span class="glyphicon" ng-class="{'glyphicon-ok': question.correct, 'glyphicon-remove': !question.correct}"></span> 
        </button> 
       </div> 
      </div> 
      <div class="col-xs-4"> 
       <div class="row"> 
        <h4>Legend:</h4> 
        <div class="col-sm-4"> 
         <button class="btn btn-success"> 
          <span class="glyphicon glyphicon-ok"></span> 
         </button> 
         <p>Answered</p> 
        </div> 
        <div class="col-sm-4"> 
         <button class="btn btn-danger"> 
          <span class="glyphicon glyphicon-remove"></span> 
         </button> 
         <p>Unanswered</p> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-xs-12 top-buffer"> 
       <h2>Score: {{results.quizMetrics.numCorrect}}/{{results.dataService.quizQuestions.length}}</h2> 
       <h2><strong>{{results.calculatePerc() | number:2}}%</strong></h2> 
      </div> 
     </div> 

     <div class="row"> 
      <h3>Questions:</h3> 
      <div class="well well-sm"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <h4>{{ results.activeQuestion+1 + ". " + results.dataService.quizQuestions[results.activeQuestion].text }}</h4> 

         <div class="row" ng-if="results.dataService.quizQuestions[results.activeQuestion].type === 'text'"> 
          <div class="col-sm-6" ng-repeat="answer in results.dataService.quizQuestions[results.activeQuestion].possibilities"> 
           <h4 class="answer" 
           ng-class="results.getAnswerClass($index)"> 
            {{answer.answer}} 
            <p class="pull-right" ng-show="$index !== results.quizMetrics.correctAnswers[results.activeQuestion] && $index === results.dataService.quizQuestions[results.activeQuestion].selected">Válaszod</p> 
            <p class="pull-right" ng-show="$index === results.quizMetrics.correctAnswers[results.activeQuestion]">Helyes válasz</p> 
           </h4> 
          </div> 
         </div> 

         <div class="row" ng-if="results.dataService.quizQuestions[results.activeQuestion].type === 'image'"> 
          <div class="col-sm-6" ng-repeat="answer in results.dataService.quizQuestions[results.activeQuestion].possibilities"> 
           <div class="image-answer" 
            ng-class="results.getAnswerClass($index)"> 
            <image ng-src="{{answer.answer}}"/> 
           </div> 
          </div> 
         </div> 

        </div> 
       </div> 
      </div><!--well--> 

      <button class="btn btn-primary btn-lg" ng-click="results.reset()">Vissza</button> 
     </div> 

    </div> 

</div> 


<!--thid party js--> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js"></script> 
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-route.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script> 


<!--our app js--> 
<script src="./js/app.js"></script> 
<script src="./js/controller/list.js"></script> 
<script src="./js/controller/quiz.js"></script> 
<script src="./js/factory/quizMetrics.js"></script> 
<script src="./js/controller/results.js"></script> 
<script src="./js/factory/dataService.js"></script> 


</body> 
</html> 




Error: dataService.init is not a function 
[email protected]://localhost:8080/js/controller/results.js:40:13 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js line 14157 > Function:2:267 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:15146:18 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:24614:17 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:16888:16 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:16988:20 
ngEventHandler/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:24619:17 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:3394:3 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:3382:9

Wenn ich die getAllQ Methode anstelle der init-Methode verwenden, I bekomme immer noch diesen Fehler getAllQ ist keine Funktion, aber andere Funktionen wie diese funktionieren.

Dank für das Voraus

Quelle

2017-04-25 F3R1

Ich glaube, das Problem ist, dass die Funktion init nicht in dem Winkel factory definiert ist. Die DataFactory Funktion gibt ein Objekt dataObj zurück, diese Eigenschaften werden zu den exponierten Eigenschaften in der Fabrik, die in der Steuerung verwendet wird. Um die Lage sein, uns init in der Steuerung müssen Sie dataObj zu ändern, so dass es ist:

var dataObj = { 
    init: init, 
    quizData: quizData, 
    quizQuestions: [], 
    correctAnswers: [] 
};

Hoffnung, das hilft.

Einige zusätzliche Lesung am Fabriken vs Dienstleistungen in AngularJS:

https://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html

Quelle

2017-04-25 20:50:22 Steve

Vielen Dank für die Frage, ich werde es versuchen. Momentan ist Winkel noch magisch für mich ... – F3R1

Kein Problem. Versuchen Sie es einfach und Sie werden es bekommen – Steve

Eigentlich habe ich versucht und ich bekomme den Fehler nicht, aber die Funktion selbst, die ein REST-Aufruf ist, nichts tun ...: / – F3R1

Angular dataService.init ist keine Funktion beim Aufruf der Restfunktion

Antwort

Verwandte Themen