Question

我正在关注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>

这是Angular

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

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

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

角度只是呈现为明文

Answer 1

顶部缺少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后缀附加到控制器视图变量，当您实际访问控制器或它只是一个范围变量时，这将使其清楚。

AngularJS在HTML中呈现为纯文本

1 个答案: