AngularJS：通过迭代对象时，code不工作 [英] AngularJS: code not working when iterating through object

问题描述

我想从我的模板中的控制器 empctrl 填充员工对象的列表。

I am trying to populate a list of employee objects from my controller empctrl in a template.

下面的控制器：

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

});

不过，这code，我写的是不工作：

However, this code that I wrote isn't working:

<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.employees 控制器，它的工作原理：

Nothing shows up in the UI.
Instead, if I write $scope.employees in the controller, it works:

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

因为我知道这是多么诱人的办 $范围＆LT;家居＆GT; 在控制器中，我试图避免使用 $范围尽可能的。

Since I know how tempting it is to do $scope.<everything> in the controller, I'm trying to avoid using $scope as much as possible.

如果有人能证明betwee alias.abc 的正确使用 $范围和差异和 $ scope.abc （其中别名是控制器的一个别名），我会很感激。

If someone could demonstrate the proper use of $scope and difference betwee alias.abc and $scope.abc (where alias is an alias of controller), I'll be thankful.

编辑：完全一样的问题是这样的：<一href=\"http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers/14168699#14168699\">'this' VS在AngularJS控制器$范围

Exact same question is this: 'this' vs $scope in AngularJS controllers

感谢这个链接，PankajParkar。

Thanks for this link, PankajParkar.

推荐答案

问题是这个您所内访问 populateTable 功能不是这个，你在你的控制器功能都在那里。

The problem is this which you are accessing inside populateTable function is not this which you have there in your controller function.

做的更好保持有些变量在这里面变量，所以有它，你将确保你指的是正确的对象。

Better do keep this variable inside some variable, so that by having it you will make sure you are referring to correct object.

控制器

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

有关更多详细信息，我会强烈建议您在的 本文

For more detail, I'd highly recommend you to readup on this article

如果你感到困惑与这个 VS 范围那么做的this答案

If you are confused with this vs scope then do read up on this answer

这篇关于AngularJS：通过迭代对象时，code不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！