AngularJS呈現為HTML中的純文本
[英]AngularJS rendering as plaintext in HTML
問題描述
我正在遵循Code School上的AngularJS教程，而我的JavaScript不會呈現到HTML中。
這是HTML
<html ng-controller="StoreController as store">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div>
<h1> {{store.product.name}} </h1>
<h2> $ {{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
這是角
(function(){
var app = angular.module("store", []);
app.controller('StoreController',function(){
this.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description:"..."
};
})();
角度只是渲染為純文本
1 個解決方案
解決方案1
1 2014-06-17 07:31:14
頂部缺少ngApp。
<html data-ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div ng-controller="StoreController as storeCtrl">
<h1> {{storeCtrl.product.name}} </h1>
<h2> $ {{storeCtrl.product.price}} </h2>
<p> {{storeCtrl.product.description}} </p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
在實際定義gem變量之前，它已由angular使用。
(function(){
var app = angular.module("store", []);
var gem = {
name: 'Dodecahedron',
price: 2.95,
description:"..."
};
app.controller('StoreController',function(){
this.product = gem;
});
)();
並且我建議將script標簽移到頂部，因為這樣做是為了使html渲染更快，但這會導致角度應用程序在毫秒內顯示難看的占位符。
並追加- Ctrl后綴，以控制視圖變量，這會清楚，當你實際工作訪問控制器或者它只是一個范圍變量。
HTML代碼未呈現，僅顯示為純文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.