"Controller as" 不适用于 ng-repeat

Question

我试图在 "Controller as" 块中填充一个列表，但我似乎无法显示任何内容。我得到了一个关于我的想法的最小例子 $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进入一个不属于控制器本身的意外上下文。解决方案是使用正常 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 syntax.Either 你必须使用 transpiler(Babel) 将 es6 代码编译成纯 javascript.

尝试改变这个

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

有

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

JSFiddle

"Controller as" 不适用于 ng-repeat

"Controller as" not working with ng-repeat

javascript

angularjs

angularjs-scope