角没有定义，虽然我已经定义它

问题描述：

我得到： “未捕获的ReferenceError：角没有定义”，为下面的代码：角没有定义，虽然我已经定义它

<!DOCTYPE html> 
<html lang="en" ng-app="confusionApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 
    <title>Ristorante Con Fusion: Menu</title> 
     <!-- Bootstrap --> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="styles/bootstrap-social.css" rel="stylesheet"> 
    <link href="styles/mystyles.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 

<body> 

    <div class="container"> 
     <div class="row row-content" ng-controller="menuController as menuCtrl"> 
      <div class="col-xs-12"> 
       <ul class="media-list"> 
        <li class="media" ng-repeat="dish in menuCtrl.dishes"> 
        <div class="media-left media-middle"> 
         <a href="#"> 
          <img class="media-object img-thumbnail" 
           ng-src={{dish.image}} alt="Uthappizza"> 
         </a> 
        </div> 
        <div class="media-body"> 
         <h2 class="media-heading">{{dish.name}} 
          <span class="label label-danger">{{dish.label}}</span> 
          <span class="badge">{{dish.price | currency}}</span></h2> 
         <p>{{dish.description}}</p> 
         <p>Comment: {{dish.comment}}</p> 
         <p>Type your comment: 
          <input type="text" ng-model="dish.comment"></p> 
        </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <script> 
     var app = angular.module('confusionApp',[]); 
     app.controller('menuController', function() { 
      var dishes = [ 
       { 
        name:'Uthapizza', 
        image: 'images/uthapizza.png', 
        category: 'mains', 
        label:'Hot', 
        price:'4.99', 
        description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
        comment: '' 
       }, 
       { 
        name:'Zucchipakoda', 
        image: 'images/zucchipakoda.png', 
        category: 'appetizer', 
        label:'', 
        price:'1.99', 
        description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce', 
        comment: '' 
       }, 
       { 
        name:'Vadonut', 
        image: 'images/vadonut.png', 
        category: 'appetizer', 
        label:'New', 
        price:'1.99', 
        description:'A quintessential ConFusion experience, is it a vada or is it a donut?', 
        comment: '' 
       }, 
       { 
        name:'ElaiCheese Cake', 
        image: 'images/elaicheesecake.png', 
        category: 'dessert', 
        label:'', 
        price:'2.99', 
        description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms', 
        comment: '' 
       } 
      ] 
     }); 
    </script> 
    <script src="../bower_components/angular/angular.min.js"></script> 

</body> 

</html>

我真的不明白这里有什么问题，因为我已经在行中定义了angular.js：

<script src="../bower_components/angular/angular.min.js"></script>

我也尝试在最后两个块之间切换，但没有得到不同的结果。

你能够获取Angular的库文件吗？ –

你是什么意思？我可以打开这个文件... – CrazySynthax

你已经包括你的模块之前Angular的库文件我猜 –

答

将角度脚本标记移动到头部。你内嵌脚本

var app = angular.module('confusionApp',[]);

会变得前角的相片库会获取

我做到了。现在我得到一个空白的网页。 – CrazySynthax

而不是 'VAR菜=' 使用 'this.dishes =' –

此人帮助:-)你能解释一下为什么吗？ – CrazySynthax

答

你应该把<script src="../bower_components/angular/angular.min.js"></script><script> var app = angular.module('confusionApp',[]); ...之前执行。

我做到了。现在我得到一个空白的网页。 – CrazySynthax

检查控制台，看看发生了什么。 – Qianyue

答

将此置于首位。

<script src="../bower_components/angular/angular.min.js"></script> `before` <script> var app = angular.module('confusionApp',[]); ....

答

感谢所有人，尤其是@Dygen。

正确的代码：

<!DOCTYPE html> 
<html lang="en" ng-app="confusionApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 
    <title>Ristorante Con Fusion: Menu</title> 
     <!-- Bootstrap --> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="styles/bootstrap-social.css" rel="stylesheet"> 
    <link href="styles/mystyles.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

    <div class="container"> 
     <div class="row row-content" ng-controller="menuController as menuCtrl"> 
      <div class="col-xs-12"> 
       <ul class="media-list"> 
        <li class="media" ng-repeat="dish in menuCtrl.dishes"> 
        <div class="media-left media-middle"> 
         <a href="#"> 
          <img class="media-object img-thumbnail" 
           ng-src={{dish.image}} alt="Uthappizza"> 
         </a> 
        </div> 
        <div class="media-body"> 
         <h2 class="media-heading">{{dish.name}} 
          <span class="label label-danger">{{dish.label}}</span> 
          <span class="badge">{{dish.price | currency}}</span></h2> 
         <p>{{dish.description}}</p> 
         <p>Comment: {{dish.comment}}</p> 
         <p>Type your comment: 
          <input type="text" ng-model="dish.comment"></p> 
        </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <script src="../bower_components/angular/angular.min.js"></script> 
    <script> 
     var app = angular.module('confusionApp',[]); 
     app.controller('menuController', function() { 
      this.dishes = [ 
       { 
        name:'Uthapizza', 
        image: './images/uthapizza.png', 
        category: 'mains', 
        label:'Hot', 
        price:'4.99', 
        description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
        comment: '' 
       }, 
       { 
        name:'Zucchipakoda', 
        image: 'images/zucchipakoda.png', 
        category: 'appetizer', 
        label:'', 
        price:'1.99', 
        description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce', 
        comment: '' 
       }, 
       { 
        name:'Vadonut', 
        image: 'images/vadonut.png', 
        category: 'appetizer', 
        label:'New', 
        price:'1.99', 
        description:'A quintessential ConFusion experience, is it a vada or is it a donut?', 
        comment: '' 
       }, 
       { 
        name:'ElaiCheese Cake', 
        image: 'images/elaicheesecake.png', 
        category: 'dessert', 
        label:'', 
        price:'2.99', 
        description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms', 
        comment: '' 
       } 
      ] 
     }); 
    </script> 


</body> 

</html>

的结论是： 1.没有必要加载angular.min.js在报头块中。 2.仍然需要在“angular.module”行之前加载angular.min.js。 3.控制器内的变量应该由this.varname声明。

角没有定义，虽然我已经定义它

相关推荐