Binding der Variable funktioniert nicht

Question

Ich habe eine benutzerdefinierte Anweisung erstellt und möchte eine einfache variable Bindung durchführen. Wenn ich die Daten direkt einstelle, wird alles korrekt angezeigt, aber wenn ich meine Abfrage benutze, werden noch keine Daten gesetzt. Die Konsolenausgabe zeigt mir, dass die Variable zugewiesen wurde.

Dies ist meine Richtlinie:

function tutorialCourse(){ 
return{ 
    restrict: 'E', 
    templateUrl: 'app/tutorial/tutorialCourse.html', 
    controller: 'TutorialCourseController', 
    controllerAs: 'tutorial' 
}; 
}; 

und dies ist mein Controller:

TutorialCourseController.$inject = ['$q', 'Course']; 

function TutorialCourseController($q, Course){ 

    this.course = {}; 

    loadTutorial(); 

    function loadTutorial(){ 
     Course.query().$promise.then(function(courses){ 
      this.course = _.first(courses); 
      console.log(this.course) 

     }); 
    }; 

} 

mein html ist wirklich einfach:

<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h4 class="panel-title">{{tutorial.course.title}} </h4> 
    </div> 
</div> 

ich die Werte zurück bereits versucht in laodTutorial und verwenden Sie den Funktionsaufruf, um es direkt der Kursvariablen zuzuordnen, aber das hat nicht funktioniert. Aber wenn ich das tue

this.course = {id: 11, title: "Tutorial"} 

alles funktioniert gut. Irgendeine Idee, was ich nicht verstehe oder falsch mache?

Answer 1

Das Problem ist this.course innerhalb der Abfrage Callback-Funktion ist nicht die this (Kontext) außerhalb der Funktion. Weil jede JavaScript-Funktion ihren eigenen Kontext hat, wenn sie instanziiert/ausgeführt werden.

Sie könnten dieses Problem lösen, indem Sie den Controllerkontext unter var self = this; speichern und self verwenden, während Sie auf TutorialCourseController context zeigen. Durch lexikalisches Scoping wird Javascript den Wert self variabel auflösen.

TutorialCourseController.$inject = ['$q', 'Course']; 

function TutorialCourseController($q, Course){ 
    var self = this; 
    self.course = {}; 

    loadTutorial(); 

    function loadTutorial(){ 
     Course.query().$promise.then(function(courses){ 
      self.course = _.first(courses); 
      console.log(this.course); 
     }); 
    }; 
} 

Verweis auf John Papa styleguide