为什么我的变量在控制器中未定义？答案

【问题标题】：Why is my variable undefined in the controller?为什么我的变量在控制器中未定义？
【发布时间】：2017-03-06 13:37:05
【问题描述】：

这是我的控制器代码，只要函数 init() 运行，它就会为 this.customers 返回 undefined。

myApp.controller('OrdersController',['$routeParams', function ($routeParams) {
var customerId = $routeParams.customerId;
this.orders = null;


this.customers = [
    {joined: '2012-12-03', name: 'Amit', city: 'Delhi', orderTotal: 34.53,orders: [{id:1,product:'shoes',total:'34.53'}]},
    {joined: '1995-04-24', name: 'Ravi', city: 'Mumbai',orderTotal: 45.34,orders: [{id:2,product:'socks',total:'53.51'}]},
    {joined: '2003-03-21', name: 'Flish', city: 'Lonavla', orderTotal: 134.323,orders: [{id:3,product:'books',total:'43.55'}]},
    {joined: '2003-10-14', name: 'Meahe', city: 'Pune', orderTotal: 12.33,orders: [{id:4,product:'eraser',total:'12.33'}]}
];

function init() {
    console.log('infunc',this.customers);
    //search the customers for customerId
    for(var i=0; i < this.customers.length; i++){
        if(this.customers[i].orders[0].id === parseInt(customerId)) {
            this.orders = this.customers[i].orders;
        }
    }
}

init();

}]);

【问题讨论】：

避免使用这个，而是使用 var customer 或 $scope.customer

标签： angularjs angular-controller

【解决方案1】：

最好定义var vm = this 然后使用而不是this。

myApp.controller('OrdersController',['$routeParams', function ($routeParams)        {
var vm = this; 
var customerId = $routeParams.customerId;
vm.orders = null;

vm.customers = [
    {joined: '2012-12-03', name: 'Amit', city: 'Delhi', orderTotal: 34.53,orders: [{id:1,product:'shoes',total:'34.53'}]},
    {joined: '1995-04-24', name: 'Ravi', city: 'Mumbai',orderTotal: 45.34,orders: [{id:2,product:'socks',total:'53.51'}]},
    {joined: '2003-03-21', name: 'Flish', city: 'Lonavla', orderTotal: 134.323,orders: [{id:3,product:'books',total:'43.55'}]},
    {joined: '2003-10-14', name: 'Meahe', city: 'Pune', orderTotal: 12.33,orders: [{id:4,product:'eraser',total:'12.33'}]}
];

function init() {
    console.log('infunc',vm.customers);
    for (var i=0; i < vm.customers.length; i++) {
        if ($scope.customers[i].orders[0].id === parseInt(customerId)) {
            vm.orders = vm.customers[i].orders;
        }
    }
 }

  init();
}]);

【讨论】：

【解决方案2】：

this SO question 基本上回答了你的问题，这说明this 和$scope 不一定是同一个东西。创建控制器时，this 是控制器，$scope 也是。但是当函数init() 实际被求值时，不能保证this 与$scope 具有相同的含义。在任何情况下，使用this 存储的数据对于任何视图都将不可用，而只有存储在$scope 的内容将可用。因此，出于多种原因，您应该将代码更改为：

myApp.controller('OrdersController',['$routeParams', function ($routeParams) {
    var customerId = $routeParams.customerId;
    $scope.orders = null;

    $scope.customers = [
        {joined: '2012-12-03', name: 'Amit', city: 'Delhi', orderTotal: 34.53,orders: [{id:1,product:'shoes',total:'34.53'}]},
        {joined: '1995-04-24', name: 'Ravi', city: 'Mumbai',orderTotal: 45.34,orders: [{id:2,product:'socks',total:'53.51'}]},
        {joined: '2003-03-21', name: 'Flish', city: 'Lonavla', orderTotal: 134.323,orders: [{id:3,product:'books',total:'43.55'}]},
        {joined: '2003-10-14', name: 'Meahe', city: 'Pune', orderTotal: 12.33,orders: [{id:4,product:'eraser',total:'12.33'}]}
    ];

    function init() {
        console.log('infunc',this.customers);
        for (var i=0; i < this.customers.length; i++) {
            if ($scope.customers[i].orders[0].id === parseInt(customerId)) {
                $scope.orders = $scope.customers[i].orders;
            }
        }
    }

    init();
}]);

【讨论】：

【解决方案3】：

@Tim Biegeleisen 和 hadiJz 的回复非常有帮助，其中包含您需要知道的所有内容，但我正在回复一个通用的 Javascript 解释并希望将其包含在内。当被 Angular 的元素复杂化时，这个简化的摘录帮助了我 this：

对于一般的 Javscript，this 可以绑定在三个不同的方法。 this 绑定在被调用函数的本地范围内（它不是对象的属性）。如果一个函数被正常调用（例如 f()），然后 'this' 指向全局对象。如果一个函数作为构造函数调用（即，作为“new”的一部分），然后是“this” 指向新创建的对象。 this 的最后一种情况是方法调用（例如 a.f()），其中 'this' 将指向计算点左侧的结果。

我并不是要窃取答案，您绝对应该选择 Tim 或 hadiJz's，但这可能有助于您了解他们回答的要素。

【讨论】：