Question

我正在学习AngularJS。

我创建了一个页面index.html（代码见下文），它应该显示product模块中定义的store变量的数据（下面的文件app.js）。它工作正常，直到我添加了评论部分。此后，占位符替换停止工作（而不是{{product.name}}，应显示实际的产品名称。）

Screenshot

但我无法弄清楚，现在到底出了什么问题。

如何调试此代码（找出原因，为什么突然没有数据显示）？

app.js

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

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

    app.controller('PanelController', function(){
        this.tab = 1;
        this.selectTab = function(setTab) {
            this.tab = setTab;
        };
        this.isSelected = function(checkTab) {
            return this.tab === checkTab;
        }
    });

    var gems = [
        {
            name: "Dodecahedron",
            price: 2,
            description: 'Some description',
            canPurchase: true,
            images : [
                {
                    full: 'img01.jpg',
                    thumb: 'img01.jpg'
                },
                {
                    full: 'img02.jpg',
                    thumb: 'img02.jpg'
                },
                {
                    full: 'img03.jpg',
                    thumb: 'img03.jpg'
                },
            ],
            reviews = [
                {
                    stars: 5,
                    body: "I love this product!",
                    author: "joe@thomas.com"
                },
                {
                    stars: 1,
                    body: "I hate this product!",
                    author: "mike@thomas.com"
                },
            ]
        },
        {
            name: "Pentagonal Gem",
            price: 5.95,
            description: 'Some description 2',
            canPurchase: false,
            images : [
                {
                    full: 'img04.jpg',
                    thumb: 'img04.jpg'
                },
                {
                    full: 'img05.jpg',
                    thumb: 'img05.jpg'
                },
                {
                    full: 'img06.jpg',
                    thumb: 'img06.jpg'
                },
            ]           
        }
    ]
})();

的index.html

<!DOCTYPE html>
<html ng-app="store">
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    </head>
    <body ng-controller="StoreController as store">
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>        
        <div ng-repeat="product in store.products">
            <h1>{{product.name}}</h1>
            <section ng-init="tab = 1" ng-controller="PanelController as panel">
                <ul class="nav nav-pills">
                    <li ng-class="{ active:panel.isSelected(1) }">
                        <a href ng-click="panel.selectTab(1)">Description</a>
                    </li>
                    <li ng-class="{ active:panel.isSelected(2) }">
                        <a href ng-click="panel.selectTab(2)">Specifications</a>
                    </li>
                    <li ng-class="{ active:panel.isSelected(3) }">
                        <a href ng-click="panel.selectTab(3)">Reviews</a>
                    </li>
                </ul>
                <div class="panel" ng-show="panel.isSelected(1)">
                    <h4>Description</h4>
                    <p>{{product.description}}</p>
                </div>
                <div class="panel" ng-show="panel.isSelected(2)">
                    <h4>Specifications</h4>
                    <blockquote>None yet</blockquote>
                </div>
                <div class="panel" ng-show="panel.isSelected(3)">
                    <h4>Reviews</h4>
                    <blockquote ng-repeat="review in product.reviews">
                        <b>Stars: {{review.stars}}</b>
                        {{review.body}}
                        <cite>by: {{review.author}}</cite>
                    None yet
                    </blockquote>
                </div>
            </section>
            <h2>{{product.price | currency}}</h2>
            <img ng-src="img/{{product.images[0].full}}"/>
            <button ng-show="product.canPurchase">Add to cart</button>
        </div>
    </body>
</html>

Answer 1

大多数错误都发送到浏览器控制台。还有几种自定义错误处理技术，here是一篇很好的文章。还有一个other，它描述了几个常见角度陷阱的代码保护。

在您的特定情况下，reviews = [的定义不正确。

Answer 2

有时候我的AngularJS应用程序也有这个“问题”，即使我写了很多东西，然后突然看起来像你当前的结果...... :-)

从现在开始几乎每次都缺少“;”在某一行的末尾，或某个地方缺少“{”或“}”括号....在你的情况下，我会在我改变其他任何东西之前看看这样的东西......

编辑发现错误

就像我说的那样......你的Bug在你的宝石JSONArray里面......我已经用'和'替换了所有= with：....之后你的应用又回来为我而活

var gems = [
        {
            name: "Dodecahedron",
            price: 2,
            description: "Some description",
            canPurchase: true,
            images : [
                {
                    full: "img01.jpg",
                    thumb: "img01.jpg"
                },
                {
                    full: "img02.jpg",
                    thumb: "img02.jpg"
                },
                {
                    full: "img03.jpg",
                    thumb: "img03.jpg"
                },
            ],
            reviews : [
                {
                    stars: 5,
                    body: "I love this product!",
                    author: "joe@thomas.com"
                },
                {
                    stars: 1,
                    body: "I hate this product!",
                    author: "mike@thomas.com"
                },
            ]
        },
        {
            name: "Pentagonal Gem",
            price: 5.95,
            description: "Some description 2",
            canPurchase: false,
            images : [
                {
                    full: "img04.jpg",
                    thumb: "img04.jpg"
                },
                {
                    full: "img05.jpg",
                    thumb: "img05.jpg"
                },
                {
                    full: "img06.jpg",
                    thumb: "img06.jpg"
                },
            ]           
        }
    ]

如何调试AngularJS代码？

2 个答案: