2016-07-05 70 views
0

我得到: 「未捕獲的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> 

我也嘗試在最後兩個塊之間切換,但沒有得到不同的結果。

+0

你能夠獲取Angular的庫文件嗎? –

+0

你是什麼意思?我可以打開這個文件... – CrazySynthax

+0

你已經包括你的模塊之前Angular的庫文件我猜 –

回答

0

將角度腳本標記移動到頭部。你內嵌腳本

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

會變得前角的相片庫會獲取

+0

我做到了。現在我得到一個空白的網頁。 – CrazySynthax

+1

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

+0

此人幫助:-)你能解釋一下爲什麼嗎? – CrazySynthax

0

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

+0

我做到了。現在我得到一個空白的網頁。 – CrazySynthax

+0

檢查控制檯,看看發生了什麼。 – Qianyue

0

將此置於首位。

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

感謝所有人,尤其是@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聲明。

相關問題