javascript - AngularJS 和 TypeScript 绑定(bind)不起作用

Question

我有以下非常简单的 html 片段

<div data-ng-repeat="goal in vm.goals">!!!</div>

然后在 Controller 中我有以下内容:

    //this.goals = dataService.createStaticGoals();
    dataService.getCurrentTasks()
        .then(function (results: Array<ReadingLog.Models.UserGoal>) {
        this.goals = results;
        });

如果我取消注释第一行，那么一切都会正常，并且我会按照预期看到 DIV，但是当我执行数据服务方法时，我在页面上看不到任何 div。

数据服务现在非常简单，您可以看到它正在执行相同的 createStaticGoals 方法，该方法确实有效，只是包装在 Promise 中。

getCurrentTasks(): ng.IPromise<Array<ReadingLog.Models.UserGoal>> {
    var promise = this.$q.defer();

    var goals = this.createStaticGoals();

    promise.resolve(goals);

    return promise.promise;
}

任何人都可以看到我错过了什么，它必须是简单的东西，但我似乎看不到它。

Answer 1

在函数中，this 的值取决于函数的调用方式，在这种情况下，它不引用您的 Controller 。如果您确实希望它引用您的 Controller ，您可以使用 Function.prototype.bind :

dataService.getCurrentTasks()
    .then((function (results: Array<ReadingLog.Models.UserGoal>) {
       this.goals = results;
    }).bind(controller));

您可以阅读有关 this 关键字的更多信息 here和here .

另请注意，将 this.$q.defer(), deferred 的结果命名更清晰:

var deferred = this.$q.defer();