AngularJS控制器初始化问题，当从$scope切换到"controller as"的形式

AngularJS controller initialization problems when switching from $scope to "controller as" form

本文关键字：quot controller as 问题 初始化 控制器 当从 scope AngularJS      更新时间：2023-09-26

当从$scope切换到"controller as"语法时，我遇到了"this"引用的麻烦。我需要调用一个服务来获取初始页面加载的一些数据。但是我得到的"this"指的是全局窗口对象，而不是练习控制器的实例。有点奇怪。以下是我所知道的。

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)

留给我的是一个数据对象，即使在显式地设置了定义之后，它也是未定义的。有什么想法可以做些什么来解决这个问题或围绕这个问题工作?

这是一个非常典型的问题。给promise提供回调函数的方式会让它在全局上下文中被调用。你需要绑定回调函数到控制器上下文:

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

或者直接使用保留词法作用域的箭头函数:

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

如果你把

var vm = this;

你可以在任何地方使用vm来代替这个!:)

相关文章：