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

Question

这是我的控制器代码，函数 init() 运行后，returns 未定义 this.customers。

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();

}]);

Answer 1

你的问题基本由this SO question回答，说明this和$scope不一定是一回事。创建controller时，this是controller，$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();
}]);

Answer 2

最好定义 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();
}]);

Answer 3

@Tim Biegeleisen 和 hadiJz 的回复非常有帮助，包含了您需要了解的所有内容，但我正在回复一般性的 Javascript 解释，并希望将其包含在内。当被 Angular:

的元素混淆时，这个简化的摘录帮助了我 this

Regarding Javscript in general, this can be bound in three different ways. this is bound in the local scope of the invoked function (it is not a property of an object). If a function is invoked normally (e.g., f()), then 'this' points to the global object. If a function is invoked as a constructor (i.e., as part of 'new'), then 'this' points to the newly created object. The last case for this is a method invocation (e.g., a.f()), where 'this' will point to the object that results from evaluating the left of the dot.

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

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

Why is my variable undefined in the controller?

angularjs

angular-controller