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

Question

我正在尝试从模板中的控制器 empctrl 填充 employee 对象列表。

这是控制器：

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>

用户界面中没有显示任何内容。
相反，如果我在控制器中写$scope.employees，它会起作用：

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

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

---

如果有人能证明$scope 的正确使用以及alias.abc 和$scope.abc 之间的区别（其中alias 是控制器的别名），我将不胜感激。

编辑：完全相同的问题是：'this' vs $scope in AngularJS controllers

感谢此链接，PankajParkar。

Answer 1

问题是您在populateTable 函数中访问的this 不是您在控制器函数中的this。

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

控制器

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

有关更多详细信息，我强烈建议您阅读this article

如果您对 this 和 scope 感到困惑，请继续阅读 this answer

Answer 2

将您的变量添加到$scope 而不是this，例如：

$scope.customers = {};

$scope.populateTable = function (data) {
    $scope.employees = data;
};

编辑：这两种方法都有效。请参阅this article 以获得深入的解释。

Answer 3

将 "this" 替换为 vm (View-Model) 将解决您的问题。不污染 $scope 对象是一件很时髦的事情。 this 是一个全局上下文，其值取决于函数调用。

所以，在你的控制器中分配，

var vm = this;
  vm.empTable = function (data) {
  vm.employeeList = data.data; 
};

..并在控制器的其他地方使用 vm 对象。在一个视图中使用多个控制器时，保持代码整洁会很有用。

别忘了给控制器起一个别名，

<div ng-controller="MainCtrl as main">
    <div ng-repeat=" employee in main.vm.employeeList ">
        {{employee.name}}
    </div>
</div>