ReferenceError: lectorFac ist nicht definiert

Question

Wenn ich die HTML-Seite lade, ruft mein Controller Daten von einem API-Endpunkt bezüglich eines Kurses ab. Die Seite wird mit den Daten zum Kurs gefüllt. Gleichzeitig möchte ich einen Teil der Seite mit Daten über den Dozenten des Kurses (Bild, Name, Beschreibung etc ...) füllen. Ich übergebe den Dozenten-Namen an die Methode mit der ng-init-Direktive, aber ich bekomme eine

ReferenceError: lectorFac ist nicht definiert.

Ich bin mir nicht sicher, aber ich glaube, das Problem ist die Art, wie ich die Funktion getLecturer() mit der ng-init-Direktive aufrufen werde.

Was beim Laden der Seite passieren soll, sind die Details des Dozenten auf der Seite zusammen mit den Kursdetails.

courses.html

<div class="container" ng-controller="CoursesDetailsCtrl"> 

    <div class="row" > 
     <div class="col-4" ng-model="getLecturer(courses.lecturer)"> 
      <div> 
      <h3>{{lecturer.name}}</h3> 
      <<div> 
       <img class="img-circle" ng-src="{{lecturer.picture}}" alt="" /> 
      </div> 
       <p>{{lecturer.description}}</p> --> 
      </div> 

     </div> 
     <div class="col-8"> 
      <div class="myContainer" > 
       <h2>{{courses.name}}</h2> 
       <div class="thumbnail"> 
        <img ng-src="{{courses.picture}}" alt="" /> 
       </div> 
       <div> 
        <p>{{courses.description}}</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CoursesDetailsCtrl

todoApp.controller('CoursesDetailsCtrl', ['coursesFac','lecturerFac','$scope','$stateParams', function CoursesCtrl(coursesFac, lecturerFac, $scope, $stateParams){ 

$scope.getLecturer = function(name){ 
     lecturerFac.getLecturerByName(name) 
      .then(function (response) { 
       $scope.lecturer = response.data; 
       console.log($scope.lecturer); 
      }, function (error) { 
       $scope.status = 'Unable to load lecturer data: ' + error.message; 
       console.log($scope.status); 
      }); 
    }; 

}]); 

lecturerFac

todoApp.factory('lecturerFac', ['$http', function($http) { 

var urlBase = '/api/lecturer'; 
    var coursesFac = {}; 

    lecturerFac.getLecturer = function() { 
     return $http.get(urlBase); 
    }; 

    lecturerFac.getLecturerByName = function (name) { 
     return $http.get(urlBase + '/' + name); 
    }; 

    return lecturerFac; 
}]); 

Answer 1

Ich denke, die Ursache dieses Fehlers ist die lecturerFac Variable wird nicht in der Fabrik initialisiert. Erstellen Sie im Werk einen leeren Objektaufruf lecturerFac und senden Sie ihn zurück.

todoApp.factory('lecturerFac', ['$http', function($http) { 
    var urlBase = '/api/lecturer'; 
    var coursesFac = {}; 

    var lecturerFac= {};///////////////////// 

    lecturerFac.getLecturer = function() { 
     return $http.get(urlBase); 
    }; 
    lecturerFac.getLecturerByName = function(name) { 
     return $http.get(urlBase + '/' + name); 
    }; 
    return lecturerFac; 
}]); 

Vermeiden Sie auch den Aufruf von Funktionen innerhalb des ng-Modells. Wenn Sie etwas mit dem ng-Modell verbinden, muss es sowohl zum Lesen als auch zum Schreiben verfügbar sein - z. eine Eigenschaft/ein Feld für ein Objekt. Verwenden Sie stattdessen ng init

Answer 2

todoApp.factory('lecturerFac', ['$http', function($http) { 

    var urlBase = '/api/lecturer'; 
     var coursesFac = {}; 
     var service = {}; 
     service.getLecturer = function() { 
      return $http.get(urlBase); 
     }; 

     service.getLecturerByName = function (name) { 
      return $http.get(urlBase + '/' + name); 
     }; 

     return service; 
    }]);