Question

我在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

Answer 1

此行中缺少,：pubdate: new Date('2011', '02' '18')。它应该是pubdate: new Date('2011', '02', '18')。

另外，我想您添加了**来突出显示问题中的代码。如果没有，它应该不在您机器的代码中。以下是您的代码的实例：jsFiddle

显示错误结果的角度图

1 个答案: