变量绑定不起作用

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>

我已经尝试 return laodTutorial 中的值并使用函数调用将其直接分配给课程变量，但这没有用。但是如果我这样做

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

一切正常。知道我不理解或做错了什么吗？

Answer 1

问题是 this.course 在查询回调函数内部使用的不是函数外部的 this(context)。因为每个 javascript 函数在获得 instantiate/executed 时都有自己的上下文。

您可以通过将控制器上下文存储在 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

变量绑定不起作用

Binding of variable not working

angularjs

angularjs-directive