AngularJS：迭代对象时代码不起作用[重复]

Question

app.controller('employeeController', function ($scope, employeeService) {

    this.employees = {};

    this.populateTable = function (data) {

        this.employees = data;
    };

    var error = function (err) {
        console.log("Error: " + err);
    };

    // Call Service to List all Employees
    console.log("Service called to populate table.");
    employeeService.output().then(this.populateTable, error);
    this.populateTable();

});

但是，我编写的这段代码不起作用：

<div ng-repeat="employee in empctrl.employees.allEmployees" class="table_row">
    <div class="table_column" style="width:2%">{{ $index + 1 }}</div>
    <div class="table_column" style="width:8%">{{ employee.employeeName}}</div>
    <!-- 7 more columns -->
</div>

UI中不会显示任何内容。
相反，如果我在控制器中编写$scope.employeese，它可以工作：

<div ng-repeat="employee in employees.allEmployees" class="table_row">

因为我知道在控制器中执行$scope. 是多么诱人，所以我尽量避免使用$scope。

Answer 1

问题是在populatetable函数中访问的这个不是控制器函数中的这个。

最好将这个变量保存在某个变量中，这样您就可以确保引用的对象是正确的。

控制器

app.controller('employeeController', function ($scope, employeeService) {
    var vm = this;
    vm.employees = {};

    vm.populateTable = function (data) {
        vm.employees = data;
    };

    var error = function (err) {
        console.log("Error: " + err);
    };

    // Call Service to List all Employees
    console.log("Service called to populate table.");
    employeeService.output().then(vm.populateTable, error);
    vm.populateTable();
});