Question

我正在尝试使用angularJS来了解它是如何工作的。我跟着关于egghead.io的教程，非常好。

想出了这个小提琴，但是我发现这个问题/错误让我感到很恼火什么都没有显示/输出

app.js

(function() {
    var app = angular.module('gemStore', []);

    app.controller('StoreController', function() { 
      this.products = gems;
    });


    var gems = [
        {
            name: "Soap",
            price: 25,
            quantity: 10,
            canPurchase: false
        }, 
        {
            name: "Bag",
            price: 100,
            quantity: 15,
            canPurchase: false
        }
    ];

});

的索引

<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
    <h1>{{product.name}}</h1>
    <h2>${{product.price}}</h2>
    <button ng-show="product.canPurchase">Add to cart</button>
</div>

这是小提琴：https://jsfiddle.net/Vwsej/618/（更新）希望你能指出我正确的方向。

事先，谢谢。

Answer 1

您忘记在页面中添加角度。只需添加：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

到你的HTML页面。请注意，jsfiddle在“Frameworks＆amp; Extensions”下方的左上方有一个按钮，允许您快速添加诸如angular之类的库。

你也忘了打电话给你的IIFE：

(function() {
    //Your JS...
})(); //<--- you forgot the ()

I forked your fiddle and fixed those issues，它运作得很好。

Answer 2

你忘了打电话给自我调用功能： JS小提琴： https://jsfiddle.net/Vwsej/620/

这就是自我调用结构：

(function(){
    // your js code to execute
})();//forgot to call

Angular gemStore不输出任何内容

2 个答案: