"コントローラas"はng-repeatで動作しません

Question

"Controller as"ブロック内にリストを作成しようとしていますが、何も表示されないようです。 JS

：

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

HTML：私は$scopeでの作業私のアイデアの最小限の例を得ている

<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を固定します。あなたはES6矢印関数の構文を使用している

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の構文をサポートしていないので、純粋なjavascriptにes6コードをコンパイルするには、transpiler（Babel）を使用する必要があります。

は

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

JSFiddle