“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

回答

相关问题