一尘不染

AngularJS:遍历对象时代码不起作用

angularjs

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

这是控制器:

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和差异betwee
alias.abc$scope.abc(其中alias是控制器的别名),我应该心存感激。


阅读 192

收藏
2020-07-04

共1个答案

一尘不染

问题是this您正在访问内部populateTable函数而不是this控制器函数中存在的函数。

最好将this变量保留在某个变量内,这样,通过获取变量,您可以确保引用的对象正确。

controller

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

有关更多详细信息,我强烈建议您阅读 本文。

2020-07-04