AngularJS在HTML中呈現爲明文

我遵循關於Code School的AngularJS教程，並且我的JavaScript不會呈現到HTML中。AngularJS在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:"..." 
    }; 
})();

角只是渲染爲明文

來源

2014-06-17 user3720958

的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變量被角度使用，在它被實際定義之前。

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

var gem = { 
    name: 'Dodecahedron', 
    price: 2.95, 
    description:"..."  
}; 

app.controller('StoreController',function(){ 
    this.product = gem; 
}); 

)();

，我會建議script標籤移動到頂部，因爲你這樣做，使HTML渲染速度更快，但是這會導致應用程序的角度展現你的醜佔位符毫秒。

並將-後綴追加到控制器視圖變量中，這將使您清楚，當您執行訪問控制器或它只是一個範圍變量。

來源

2014-06-17 07:31:14

AngularJS在HTML中呈現爲明文

回答

相關問題