Angular 视图显示错误结果
Angular View Showing Wrong Result
我在 Codecademy 的 Angular 课程中遇到严重问题。我不确定 运行 Codecademy 程序是否有错误,或者我的代码是否有错误。我应该看到这个 H1 标题,本月畅销书 除了书籍的所有图片。但是,相反,我看到了这个结果:{{title}}
以及这条消息:**“糟糕!测试返回了一个错误。也许你有语法错误,或者打字错误。查看完整错误。为什么我在屏幕上看到 {{title}}
,即 html 代码?我似乎无法找出原因!
这是html
:
<!doctype html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="header">
<div class="container">
<h1>Book End</h1>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<p class="title">{{ product.name }}</p>
<p class="price">{{ product.price | currency }}</p>
<p class="date">{{ product.pubdate | date }}</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
这是JavaScript (MainController.js):
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'This Month\'s Bestsellers';
$scope.promo = 'The most popular books this month.';
$scope.products = [
{
name: 'The Book of Trees',
price: 19,
pubdate: new Date('2014', '03', '08'),
cover: 'img/the-book-of-trees.jpg'
},
{
name: 'Program or be Programmed',
price: 8,
pubdate: new Date('2013', '08', '01'),
cover: 'img/program-or-be-programmed.jpg'
},
**{
name: 'One Simple Idea',
price: 22,
pubdate: new Date('2011', '02' '18'),
cover: "https://s1.postimg.org/36xiodlmzz/Key-1259589676_3_D.jpg"
},
{
name: 'Sell Your Idea with or without a Patent',
price: 22,
pubdate: new Date('2015', '03','03'),
cover:"https://s1.postimg.org/4vjmzpyxa7/stephen-key-book.jpg"
},
]
}]);
这是我添加的代码:
{
name: 'One Simple Idea',
price: 22,
pubdate: new Date('2011', '02' '18'),
cover: "https://s1.postimg.org/36xiodlmzz/Key-1259589676_3_D.jpg"
},
{
name: 'Sell Your Idea with or without a Patent',
price: 22,
pubdate: new Date('2015', '03','03'),
cover:"https://s1.postimg.org/4vjmzpyxa7/stephen-key-book.jpg"
},
此代码与紧接其前的代码的语法完全相同。但是,当我删除我输入的代码并保留原始代码时,一切都是行。 查看和比较图片。
Screenshot of result of my additional code
Screenshot of result without my code included
您在此行中缺少 ,
:pubdate: new Date('2011', '02' '18')
。应该是pubdate: new Date('2011', '02', '18')
。
此外,我想您添加了 **
以突出显示问题中的代码。如果没有,它不应该出现在您机器上的代码中。
这是您的代码的一个工作示例:jsFiddle
我在 Codecademy 的 Angular 课程中遇到严重问题。我不确定 运行 Codecademy 程序是否有错误,或者我的代码是否有错误。我应该看到这个 H1 标题,本月畅销书 除了书籍的所有图片。但是,相反,我看到了这个结果:{{title}}
以及这条消息:**“糟糕!测试返回了一个错误。也许你有语法错误,或者打字错误。查看完整错误。为什么我在屏幕上看到 {{title}}
,即 html 代码?我似乎无法找出原因!
这是html
:
<!doctype html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="header">
<div class="container">
<h1>Book End</h1>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<p class="title">{{ product.name }}</p>
<p class="price">{{ product.price | currency }}</p>
<p class="date">{{ product.pubdate | date }}</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
这是JavaScript (MainController.js):
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'This Month\'s Bestsellers';
$scope.promo = 'The most popular books this month.';
$scope.products = [
{
name: 'The Book of Trees',
price: 19,
pubdate: new Date('2014', '03', '08'),
cover: 'img/the-book-of-trees.jpg'
},
{
name: 'Program or be Programmed',
price: 8,
pubdate: new Date('2013', '08', '01'),
cover: 'img/program-or-be-programmed.jpg'
},
**{
name: 'One Simple Idea',
price: 22,
pubdate: new Date('2011', '02' '18'),
cover: "https://s1.postimg.org/36xiodlmzz/Key-1259589676_3_D.jpg"
},
{
name: 'Sell Your Idea with or without a Patent',
price: 22,
pubdate: new Date('2015', '03','03'),
cover:"https://s1.postimg.org/4vjmzpyxa7/stephen-key-book.jpg"
},
]
}]);
这是我添加的代码:
{
name: 'One Simple Idea',
price: 22,
pubdate: new Date('2011', '02' '18'),
cover: "https://s1.postimg.org/36xiodlmzz/Key-1259589676_3_D.jpg"
},
{
name: 'Sell Your Idea with or without a Patent',
price: 22,
pubdate: new Date('2015', '03','03'),
cover:"https://s1.postimg.org/4vjmzpyxa7/stephen-key-book.jpg"
},
此代码与紧接其前的代码的语法完全相同。但是,当我删除我输入的代码并保留原始代码时,一切都是行。 查看和比较图片。
Screenshot of result of my additional code
Screenshot of result without my code included
您在此行中缺少 ,
:pubdate: new Date('2011', '02' '18')
。应该是pubdate: new Date('2011', '02', '18')
。
此外,我想您添加了 **
以突出显示问题中的代码。如果没有,它不应该出现在您机器上的代码中。
这是您的代码的一个工作示例:jsFiddle