javascript - "Controller as"不适用于 ng-repeat

Question

我试图在“Controller as” block 中填充一个列表，但似乎无法显示任何内容。我得到了一个使用 $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

但是当我引入“Controller as”时，列表不显示:

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到一个不属于 Controller 本身的意想不到的上下文.解决方案是使用普通的 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>