Question

我试图在codeschool.com上浏览一个AngularJS教程，但是当我完成它并刷新浏览器以查看我的进度时，在教程的某个时刻，浏览器总是会加载一个空白的网页，不再加载代码了。我从头开始尝试了两次教程，并且在不同的时间点都发生了这两次。

我必须在代码中继续做错事。有没有其他人有这个问题或知道如何解决它？

我在这里看到了几个类似的问题，但答案尚未奏效。

这是HTML：

＆＃13;

<!DOCTYPE html>
<html ng-app='store'>
<head>
<html lang="en-US">
<link rel="stylesheet/css" type="text/css" href="bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body ng-controller="StoreController as store">
    <div ng-repeat="product in store.products">
      <h1> {{store.product.name}} </h1>
      <h2> {{store.product.price}} </h2>
      <p> {{store.product.description}} </p>
      <button>Add to Cart</button>
    </div>

    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

＆＃13;

这是JS文件：

(function (){
  const app = angular.module('store', [ ]);

  app.controller("StoreController", function(){
    this.product = gems;
  });

  const gems = [
    {
      name: "Dodecahedron",
      price: 2.95,
      description: 'Many sided gem. Would look great in a ring.',
    },
    {
      name: "Pentagonal Gem",
      price: 5.95,
      description: 'A gem shaped like a pentagon. More expensive and 
more shiny',
    }
  ];

})();

Answer 1

两件事：控制器和视图之间的变量名称不匹配，然后在ng-repeat内部包含控制器别名，而不是直接访问每个重复元素。

首先将控制器中的this.product = gems;更改为this.products = gems;，然后将ng-repeat div更改为：

<div ng-repeat="product in store.products">
  <h1> {{product.name}} </h1>
  <h2> {{product.price}} </h2>
  <p> {{product.description}} </p>
  <button>Add to Cart</button>
</div>

AngularJS简单应用程序网页停止呈现代码

1 个答案: