"Controller as" 不使用 ng-repeat(英语：Connect)

Question

我正在尝试在"控制器作为"块中填充列表，但我似乎无法显示任何内容。我得到了一个最小的例子来说明我的想法与$scope一起工作：

.JS：

var app = angular.module('testApp', []);
app.controller('listController', ["$scope", ($scope) => {
$scope.listFiles = ["hello", "world"];
}]);

.HTML：

<div ng-app="testApp" ng-controller="listController">
<div class="list-group">
<a class="list-group-item list-group-item-action" ng-repeat="filename in listFiles">{{ filename }}</a>
</div>
</div>

JSFiddle

但是当我引入"控制器作为"时，列表不显示：

.JS：

var app = angular.module('testApp', []);
app.controller('listController', ["$scope", ($scope) => {
var $ctrl = this;
$ctrl.listFiles = ["hello", "world"];
}]);

.HTML：

<div ng-app="testApp" ng-controller="listController as ctrl">
<div class="list-group">
<a class="list-group-item list-group-item-action" ng-repeat="filename in ctrl.listFiles">{{ filename }}</a>
</div>
</div>

JSFiddle

我知道$scope和this是不同的概念，但我似乎无法理解这种情况的细节。

这可能是 ng-repeat 的范围规则的结果，还是我错过了一些明显的东西？

Answer 1

在这里你不应该在定义controller function时使用arrow function，这将导致this一个不属于控制器本身的意外上下文。解决方案是使用普通function。

请参考下面的示例并修复JSFIDDLE。

var app = angular.module('testApp', []);
app.controller('listController', ["$scope", function($scope) {
var $ctrl = this;
this.listFiles = ["hello", "world"];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<div ng-app="testApp" ng-controller="listController as ctrl">
<div class="list-group">
<a class="list-group-item list-group-item-action" ng-repeat="filename in ctrl.listFiles">{{ filename }}</a>
</div>
</div>

Answer 2

您已使用 es6 箭头函数语法。由于浏览器不支持 es6 语法。要么你必须使用 transpiler(Babel( 将 es6 代码编译为纯 javascript。

尝试更改此设置

app.controller('listController', ["$scope", ($scope) => {

跟

app.controller('listController', ["$scope", function($scope)  {

JSFiddle