Question

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

这是控制器：

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

问题是this您在populateTable函数中访问的函数不是您在控制器函数中的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 vs 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对象是一件很时髦的事情。此是一个全局上下文，其值取决于函数调用。

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

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>

AngularJS：迭代对象

3 个答案: