关于范围：AngularJS：迭代对象时代码不起作用

AngularJS: code not working when iterating through object

本问题已经有最佳答案，请猛点这里访问。

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

这里是控制器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

});

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

1
2
3

{{ $index + 1 }}
{{ employee.employeeName}}

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

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

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

编辑：完全相同的问题是："这"与AngularJS控制器中的$scope

谢谢你的链接，pankajparkar。

相关讨论

问题是你在populateTable函数中访问的this不是你在控制器函数中所拥有的this。

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

控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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和scope混淆了，那么请仔细阅读这个答案。

相关讨论

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

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

1
2
3
4

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

…并在控制器的其他地方使用VM对象。在一个视图中使用多个控制器时，保持代码干净是很有用的。

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

1	{{employee.name}}

相关讨论

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

1
2
3
4
5

$scope.customers = {};

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

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

相关讨论