Question

我已经看过几个关于此问题的问题，对于我的生活，我无法想出这个问题。我没有使用ng-route而且我确定它正在获取文件我正在尝试学习一些基本的js，所以我一直在做几个教程。一个是抛出这个错误：

未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.3.10/ $ injector / modulerr？p0 = gemStore＆amp; p1 = Error％... gleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.3.10％2Fangular.min.js ％3A17％3A350）

EDITED

这是我的代码： HTML

//index.html
<!doctype html>
<html ng-app="gemStore">
  <head>
    <title>myTestApp</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
    <script type="text/javascript" src="app.js" />
  </head>
  <body ng-controller="StoreController as store">
    <div ng-repeat="product in store.products" ng-hide="store.product.soldOut">
        <h1>{{store.product.name}}</h1>
        <h1>{{store.product.price}}</h1>
        <h1>{{store.product.desc}}</h1>
        <button ng-show="store.product.canPurchase">Add To Cart</button>
    </div>
  </body>
</html>

使用Javascript：

    var app = angular.module('gemStore', []);
    app.controller('StoreController', function() {
        this.products = gems;
    });
    var gems = [
        {
            name: 'Gem',
            price: 2.95,
            desc: '. . .',
            canPurchase = false,
            soldOut = true,
        },
        {
            name: 'Gem2',
            price: 3.95,
            desc: '. . .',
            canPurchase = false,
            soldOut = true,
        }
    ]

Answer 1

这应该让你非常接近。希望它有所帮助：）

<html ng-app="gemStore">
<head>
    <title>Angular JS</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>

</head>
<body>
    <div ng-controller="StoreController">

      <h1> {{products.name}} </h1>
      <h1> {{products.price}} </h1>
      <h1> {{products.desc}} </h1>  
    </div>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

(function () {

var app = angular.module("gemStore", []);
app.controller('StoreController', ['$scope', function($scope) {
    $scope.products = gem;
}]);
var gem =
    {
        name:'New Product',
        price:'2.95',
        desc: '...'
    }
})();

Answer 2

一些错误/建议：

我不知道div ng-controller="StoreController as store"语法是否正确，但没有必要。你可以写div ng-controller="StoreController"
您需要至少拥有一个soldOut = true的产品才能看到内容：）
您宣布宝石的方式有误。声明对象文字的正确方法是var gem = {soldOut: true}，而不是var gem = {soldOut = true}。
您不需要使用IIFE包装Angular代码。（IIFE是你用(function() {....})();）
Angular控制器通过$scope依赖项（您需要注入BTW）来公开方法和对象。如果您在控制器中声明了var，然后尝试在HTML中访问它，那么您将无法做到。
（已编辑）查看您的products数组。您不需要在最后一个键和值的末尾使用逗号 - ＆gt; soldOut: false,。

工作代码在这里：http://plnkr.co/edit/s2397TznhGii84vwSIFA?p=preview

未捕获错误：[$ injector：modulerr]但不是ng-route

2 个答案: