「Controller as」not ng with ng-repeat

我試圖在「Controller as」塊中填充一個列表，但我似乎無法得到任何顯示內容。我已經得到了我的想法與$scope工作小例子：「Controller as」not ng with ng-repeat

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的作用域規則的結果，還是我缺少明顯的東西？

來源

2017-07-18 Alan G

在這裏你不應該使用arrow function，同時定義controller 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>

來源

2017-07-18 02:15:55 Pengyy

這是否有什麼關係與ES6語法的瀏覽器支持？ –

@AlanG根據你的問題，似乎箭頭功能正在工作，否則你會收到一個錯誤'控制器不是功能'。順便說一句，你的問題的主要原因是你正在使用箭頭功能，正如我回答將導致上下文問題。 – Pengyy

您已經使用ES6箭頭函數的語法。由於瀏覽器不支持es6語法，因此您必須使用轉譯器（Babel）將es6代碼編譯爲純javascript。

嘗試修改此

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

隨着

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

JSFiddle

來源

2017-07-18 02:20:14 laktherock

「Controller as」not ng with ng-repeat

回答

相關問題