Question

我正在接受AngularJS的udemy课程，但是使用'controller as'语法重写所有示例项目。当我使用本地函数时，这似乎破裂了。在下面的控制器中，this.customers在init（）函数中不可用。我已经使用console.logs的战略位置对此进行了测试。如果我使用$ scope，这似乎工作正常。

有人可以帮我解开这个吗？教师介绍了“Controller as”语法，但在整个课程中没有使用它。

(function(){
var OrdersController = function($routeParams) {
    var customerId = $routeParams.customerId;
    this.orders = null; //not required


    this.customers=[
        {
            id: 1, 
            joined: '2000-12-02', 
            name:'John', 
            city:'Chandler', 
            orderTotal: 9.9956,
            orders: [
                {
                    id: 1,
                    product: 'Shoes',
                    total: 9.9956
                }
            ]
        }, 
        {
            id: 2, 
            joined: '1965-01-25',
            name:'Zed', 
            city:'Las Vegas', 
            orderTotal: 19.99,
            orders: [
                {
                    id: 2,
                    product: 'Baseball',
                    total: 9.995
                },
                {
                    id: 3,
                    product: 'Bat',
                    total: 9.995
                }
            ]
        },
        {
            id: 3, 
            joined: '1944-06-15',
            name:'Tina', 
            city:'New York', 
            orderTotal:44.99,
            orders: [
                {
                    id: 4,
                    product: 'Headphones',
                    total: 44.99
                }
            ]
        }, 
        {
            id: 4, 
            joined: '1995-03-28',
            name:'Dave', 
            city:'Seattle', 
            orderTotal:101.50,
            orders: [
                {
                    id: 5,
                    product: 'Kindle',
                    total: 101.50
                }
            ]
        }
    ];

    //console.log(this.customers);



    init = function () {
        //Search the customers for the customerId - local function
        console.log(this.customers);
        for (var i=0,len=this.customers.length;i<len;i++) {
           if (this.customers[i].id === parseInt(customerId)) {
               this.orders = this.customers[i].orders;
               break;
           }
        }
    }


    init();
};

//OrdersController.$inject = ['$routeParams'];

angular.module('customersApp')
.controller('OrdersController', OrdersController);
}());

Answer 1

首先将this对象分配给变量：

var vm = this;

然后使用vm变量而不是this：

vm.orders = null; //not required
vm.customers=[
    {
        id: 1, 
        joined: '2000-12-02', 
        name:'John', 
        city:'Chandler', 
        orderTotal: 9.9956,
        orders: [
            {
                id: 1,
                product: 'Shoes',
                total: 9.9956
            }
        ]
    }, 
    {
        id: 2, 
        joined: '1965-01-25',
        name:'Zed', 
        city:'Las Vegas', 
        orderTotal: 19.99,
        orders: [
            {
                id: 2,
                product: 'Baseball',
                total: 9.995
            },
            {
                id: 3,
                product: 'Bat',
                total: 9.995
            }
        ]
    },
    {
        id: 3, 
        joined: '1944-06-15',
        name:'Tina', 
        city:'New York', 
        orderTotal:44.99,
        orders: [
            {
                id: 4,
                product: 'Headphones',
                total: 44.99
            }
        ]
    }, 
    {
        id: 4, 
        joined: '1995-03-28',
        name:'Dave', 
        city:'Seattle', 
        orderTotal:101.50,
        orders: [
            {
                id: 5,
                product: 'Kindle',
                total: 101.50
            }
        ]
    }
];

最后在你的函数控制台中记录数组：

init = function () {
    //Search the customers for the customerId - local function
    console.log(vm.customers);
    for (var i=0,len=vm.customers.length;i<len;i++) {
       if (vm.customers[i].id === parseInt(customerId)) {
           vm.orders = vm.customers[i].orders;
           break;
       }
    }
}

控制器与本地功能一样

1 个答案: