变量绑定不起作用

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