Question

我的app.js文件中有一个名为reviews的数组。我正在尝试在屏幕上输出两个硬编码的评论，但没有出现。控制台中的错误说主要功能是未定义的，但我使用正确的语法定义了它。任何人都可以告诉我我的代码有什么问题。目前该页面为空白，没有评论输出到屏幕。

app.js

 var app = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/page1', {
templateUrl: 'page1.html'

})
.when('/page2', {
    templateUrl: 'page2.html'

});

$locationProvider.html5Mode({enabled: true, requireBase: false});
app.controller('mainController', function($scope){
$scope.reviews = [
{
    name: 'Joe',
review: "awesome site. Super informative"
},
{
name: 'Bill',
review: "Sweet site dude!"

}
];

});

}]);

的index.html

   <html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="app.css">

</head>
<body>
<div id="headerBar">
<a ng-href="/page1" id="page1">Page 1</a>
<a ng-href="/page2" id="page2">Page 2</a>
</div>
<div id="templateView" ng-view></div>

<div id="reviews" ng-controller="mainController">
<div id="reviewOutput" ng-repeat="review in reviews">
    {{review.name}}

</div>


</div>
<script src='bower_components/angular/angular.js'></script>
<script src="bower_components/angular-route/angular-route.js">

</script>
<script src="app.js"></script>
</body>
</html>

控制台错误

Error: [ng:areq] Argument 'mainController' is not a function, got undefined
http://errors.angularjs.org/1.5.7/ng/areq?p0=mainController&p1=not%20a%20function%2C%20got%20undefined
    at angular.js:68
    at assertArg (angular.js:1885)
    at assertArgFn (angular.js:1895)
    at $controller (angular.js:10210)
    at setupControllers (angular.js:9331)
    at nodeLinkFn (angular.js:9116)
    at compositeLinkFn (angular.js:8510)
    at compositeLinkFn (angular.js:8513)
    at compositeLinkFn (angular.js:8513)
    at publicLinkFn (angular.js:8390)

Answer 1

角度表达式中的变量指的是$scope的属性。不是控制器中定义的局部变量，根据定义，只能从控制器访问（因为它们是本地变量）。

app.controller('mainController', function($scope) {
    $scope.reviews = [ ... ];
});

和

<div id="reviewOutput" ng-repeat="review in reviews">

由于您使用的是controllerAs，因此控制器本身位于$ scope中，位于您选择命名ctrl的字段中。因此视图可以访问控制器及其字段。所以你可以做到

app.controller('mainController', function() {
    this.reviews = [ ... ];
});

和

<div id="reviewOutput" ng-repeat="review in ctrl.reviews">

Answer 2

试试这个https://plnkr.co/edit/1zn6FLr8oRWHE9Y89k4z?p=preview

app.controller('mainController',['$scope', function($scope){
   $scope.reviews = [
   {
       name: 'Joe',
       review: "awesome site. Super informative"
    },
    {
       name: 'Bill',
       review: "Sweet site dude!"

     }];

}]);

如果你想在DOM中使用对象，你需要添加$ scope

Answer 3

目前，您的reviews数组是私有的。将其附加到this以使其成为控制器的一部分。

...

this.reviews = [
{
    name: 'Joe',
    review: "awesome site. Super informative"
},
{
    name: 'Bill',
    review: "Sweet site dude!"    
}
];

角度数组不以ng-repeat输出

3 个答案: