我正在通过 AngularJS.org 视频教程学习 AngularJS，但是当我运行我的代码时它说
Error: [ng:areq] Argument 'ReviewController' is not a function
我在控制台中未定义，但我的代码看起来与视频中的代码相同，这里是我的 html
<!doctype html>
<html ng-app="store">
<title>Testing AngularJS</title>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
<img class="gallery" ng-src="{{product.images[0].full}}"/>
</h3>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{active: panel.isSelected(1)}"><a href ng-click="panel.selectTab(1)">Description</a></li>
<li ng-class="{active: panel.isSelected(2)}"><a href ng-click="panel.selectTab(2)">Specifications</a>
</li>
<li ng-class="{active: panel.isSelected(3)}"><a href ng-click="panel.selectTab(3)">Reviews</a></li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h3> Description</h3>
<h4>{{product.description}}</h4>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h3> Specifications</h3>
<blockquote>None yet</blockquote>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<h3> Reviews</h3>
<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
<p>{{review.body}}</p>
<cite>_{{review.author}}</cite>
</blockquote>
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl">
<blockquote>
<b>Stars: {{reviewCtrl.review.stars}}</b>
<p>{{reviewCtrl.review.body}}</p>
<cite>_{{reviewCtrl.review.author}}</cite>
</blockquote>
<label for="select">Select</label>
<select id="select" ng-model="reviewCtrl.review.stars">
<option value="1">1 star</option>
<option value="2">2 star</option>
<option value="3">3 star</option>
</select>
<label for="comments"></label>
<textarea id="comments" ng-model="reviewCtrl.review.body"></textarea>
<label for="email">Email</label>
<input ng-model="reviewCtrl.review.author" type="email" id="email"/>
<input type="submit" value="Submit"/>
</form>
</div>
</section>
</li>
</ul>
</body>
</html>
这是我的 app.js 文件
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function () {
this.products = [
{
name: 'Cup',
price: 2.95,
description: 'It is the best Buy it fast',
images: [
{
full: 'gem.jpeg'
}
],
reviews: [
{
stars: 5,
body: 'This is the best gem',
author: 'dadsa@dasasd.com'
},
{
stars: 1,
body: 'easily broken',
author: 'zzzfasdaadsa@dasasd.com'
}
]
},
{
name: 'Bottle',
price: 1.12,
description: 'It\'s the best bottle',
images: [
{
full: 'gem.jpeg'
}
],
reviews: [
{
stars: 2,
body: 'Latest gem',
author: 'aasdsa@dasasd.com'
}
]
}
]; // product is the property of the controller
});
app.controller("ReviewController", function () {
this.review = {};
});
app.controller("PanelController", function () {
this.tab = 1;
this.selectTab = function (setTab) {
this.tab = setTab;
};
this.isSelected = function (checkTab) {
return this.tab === checkTab;
};
});
})();
最佳答案
问题出在这里:
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
脚本按照它们在页面上遇到的顺序执行。所以 angular.js 在 app.js 之前运行。它将解析文档并尝试在 app.js 有机会执行之前解析 ng-app(从而解析 ng-controller)。
有两种简单的方法可以解决这个问题:
将 app.js 内嵌在文档的末尾
虽然我确实说过脚本是按照它们遇到的顺序执行的，但是angularjs把它的初始化代码放在了document.isready后面。它已加载，因此您可以访问 angular.module，但在您自己的代码加载完成之前，它不会执行其 Bootstrap 逻辑。此解决方案适用于小型项目，但当您的代码变大时就不是很好了。
手动引导您的应用程序
从您的 html 代码中删除 ng-app="store"，并在 app.js 的末尾添加以下代码
angular.element(document).ready(function() {
angular.bootstrap(document, ['store']);
});`
如果你使用 Angular 的时间足够长，你会非常习惯第二种解决方案，因为它可以帮助我们很好地使用动态加载器，例如 $script、RequireJS 等——更不用说你的例子了发布!
关于javascript - Angular JS函数未定义错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29947567/