変数のバインドが動作しない

Question

私はカスタムディレクティブを作成しました。私は単純な変数バインディングを実行したいと思います。データを直接設定すると、すべてが正しく表示されますが、クエリを使用してもデータは設定されていません。コンソール出力から、変数が割り当てられたことがわかります。

これは私のディレクティブです：

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

、これは私のコントローラです：

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) 

     }); 
    }; 

} 

私のHTMLは本当に簡単です：

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

私はすでに内の値を返すようにしようとしましたlaodTutorialを呼び出し、関数呼び出しを使用してコース変数に直接割り当てますが、それは機能しませんでした。しかし、私がこれをすれば、

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

すべてがうまくいきます。私が理解していない、または間違っていることは何ですか？

Answer 1

問題はthis.courseです。クエリコールバック関数内での使用は、関数外のthis（コンテキスト）ではありません。なぜなら各javascript関数はインスタンス化/実行されたときに独自のコンテキストを持っているからです。

あなたはvar self = this;のコントローラコンテキストを格納することによってこの問題を解決し、TutorialCourseControllerコンテキストを指しながらselfを使用することができます。レキシカルスコープでは、JavaScriptはselfという変数の値を解決します。

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); 
     }); 
    }; 
} 

John Papa styleguide