如何調試AngularJS代碼？
[英]How to debug AngularJS code?
問題描述
我正在學習AngularJS。
我創建了一個頁面index.html （代碼見下文），該頁面應顯示在store模塊（下面的app.js文件）中定義的product變量的數據。 一切正常，直到我添加了“評論”部分。 此后，占位符替換停止工作（應該顯示實際的產品名稱，而不是{{product.name}} ）。
但我不知道，現在到底出了什么問題。
如何調試該代碼（找出原因，為什么突然之間沒有任何數據顯示）？
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>
2 個解決方案
解決方案1
2 已采納 2014-12-07 18:46:19
解決方案2
1 2014-12-07 18:42:33
有時，即使我寫了很多東西，我的AngularJS應用程序也有這個“問題”，但突然看來，它看起來像是您當前的結果... :-)
從現在開始，幾乎每次都缺少一個“；” 在一行的末尾，或者某處缺少“ {”或“}”括號....在您這種情況下，在更改其他任何內容之前，我會先看一下類似的內容...
編輯發現錯誤
就像我說的...您的錯誤在您的寶石JSONArray中...。在您的應用重新為我使用之后，我用'....替換了所有的'和'
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教程代碼調試
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.