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中呈现为明文

回答

相关问题