Question

从$ scope切换到＆＃34;控制器为＆＃34;语法，我遇到麻烦的＆＃34;这＆＃34;参考。我需要调用服务来获取初始页面加载的一些数据。但是＆＃34;这个＆＃34;我得到的是全局窗口对象，而不是运动控制器的实例。有点奇怪。这就是我所知道的。

AngularJS包含在我的主页面中......

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

以下是控制器如何包含在模板页面中。

 <div class="col-xs-9" 
      ng-include="'exercise/exercise_body.html'" 
      ng-show="mainController.showStatus.exercises" 
      ng-controller="ExerciseController as ec" 
      ng-init="ec.initialize()"></div>

这是来自ExerciseController的初始化函数。

this.initialize = function(){
    // Item lists to display on different parts of the page
    this.dataList = {};
    this.dataList.exercises = [];
    this.dataList.resources = [];

    var promise = exerciseService.getExercises();
    promise.then(function(res){
        console.log(this); // this is a window object?  why????
        this.dataList.exercises = res.data.exercises;
    });
}

最后，还有来自Chrome的堆栈跟踪......

TypeError: Cannot set property 'exercises' of undefined
at app.js:82
at angular.js:13189
at l.$eval (angular.js:14401)
at l.$digest (angular.js:14217)
at l.$apply (angular.js:14506)
at l (angular.js:9659)
at S (angular.js:9849)
at XMLHttpRequest.D.onload (angular.js:9790)

因此，即使在明确设置定义之后，还有一个未定义的数据主义对象。关于如何解决这个问题或解决这个问题的任何想法？

Answer 1

这是一个非常典型的问题。向promise提供回调函数的方式将在全局上下文中调用它。您需要将回调函数绑定到控制器上下文：

var promise = exerciseService.getExercises();
promise.then(function(res) {
    this.dataList.exercises = res.data.exercises;
}.bind(this));

或仅使用保留词汇范围的arrow function：

var promise = exerciseService.getExercises();
promise.then(res => this.dataList.exercises = res.data.exercises);

Answer 2

如果你把

var vm = this;

你可以在任何地方使用vm而不是这个！：）

从$ scope切换到＆＃34;控制器为＆＃34;时，AngularJS控制器初始化问题形成

2 个答案: