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.