Question

我创建了一个自定义指令，我想执行一个简单的变量绑定。当我直接设置数据时，一切都正常显示但是当我使用我的查询时没有设置数据，我的控制台输出显示变量已分配。

这是我的指示：

    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)

       });
   };

}

这是我的控制者：

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

我的HTML非常简单：

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

我已经尝试在laodTutorial中返回值并使用函数调用将其直接分配给课程变量，但这并不起作用。但如果我这样做

@Input

一切正常。我有什么不明白或做错的想法？

Answer 1

问题是this.course在查询回调函数内使用不是函数外的this（上下文）。因为每个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

变量绑定不起作用

1 个答案: