变量绑定不起作用

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（con​​text）。因为每个javascript函数在实例化/执行时都有自己的上下文。

您可以通过在var self = this;中存储控制器上下文来解决此问题，并在指向self上下文时使用TutorialCourseController。通过词法作用域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