2016-01-17 4 views
0

Я написал этот код для задания, но почему-то элементы Angular JS не работают. Вместо этого на экране ничего не появляется, кроме маленькой коробки, содержащей текст «Uthappizza».Угловые элементы JS не отображаются

<!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"> 

<body> 

    <div class="container"> 
     <div class="row row-content" ng-controller="dishDetailController as detailCtrl"> 
       <div class="col-xs-12"> 
        <div class="media"> 
         <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> 
         </div> 
        </div> 
       </div> 
      <div class="col-xs-9 col-xs-offset-1"> 
      </div> 
     </div> 

    </div> 

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

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

     app.controller('dishDetailController', function() { 

      var dish={ 
          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.', 
          comments: [ 
           { 
            rating:5, 
            comment:"Imagine all the eatables, living in conFusion!", 
            author:"John Lemon", 
            date:"2012-10-16T17:57:28.556094Z" 
           }, 
           { 
            rating:4, 
            comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
            author:"Paul McVites", 
            date:"2014-09-05T17:57:28.556094Z" 
           }, 
           { 
            rating:3, 
            comment:"Eat it, just eat it!", 
            author:"Michael Jaikishan", 
            date:"2015-02-13T17:57:28.556094Z" 
           }, 
           { 
            rating:4, 
            comment:"Ultimate, Reaching for the stars!", 
            author:"Ringo Starry", 
            date:"2013-12-02T17:57:28.556094Z" 
           }, 
           { 
            rating:2, 
            comment:"It's your birthday, we're gonna party!", 
            author:"25 Cent", 
            date:"2011-12-02T17:57:28.556094Z" 
           } 

          ] 
        }; 

      this.dish = dish; 

     }); 

    </script> 

</body> 

</html> 

Заранее благодарим за любую помощь.

+0

Я предлагаю создать скрипт JS или что-то еще, потому что было бы сложно отлаживать без всех ваших CSS и JS. – xivo

ответ

0

В вашем HTML нг-контроллера вы заявили:

ng-controller="dishDetailController as detailCtrl" 

так, вы должны будете использовать detailCtrl.dish.<property>

так изменения будут следующими:

<!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"> 

    <body> 

    <div class="container"> 
     <div class="row row-content" ng-controller="dishDetailController as detailCtrl"> 
     <div class="col-xs-12"> 
      <div class="media"> 
      <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">{{detailCtrl.dish.name}} 
          <span class="label label-danger">{{detailCtrl.dish.label}}</span> 
          <span class="badge">{{detailCtrl.dish.price | currency}}</span></h2> 
       <p>{{detailCtrl.dish.description}}</p> 
      </div> 
      </div> 
     </div> 
     <div class="col-xs-9 col-xs-offset-1"> 
     </div> 
     </div> 

    </div> 

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

     app.controller('dishDetailController', function() { 

     var dish = { 
      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.', 
      comments: [{ 
       rating: 5, 
       comment: "Imagine all the eatables, living in conFusion!", 
       author: "John Lemon", 
       date: "2012-10-16T17:57:28.556094Z" 
      }, { 
       rating: 4, 
       comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
       author: "Paul McVites", 
       date: "2014-09-05T17:57:28.556094Z" 
      }, { 
       rating: 3, 
       comment: "Eat it, just eat it!", 
       author: "Michael Jaikishan", 
       date: "2015-02-13T17:57:28.556094Z" 
      }, { 
       rating: 4, 
       comment: "Ultimate, Reaching for the stars!", 
       author: "Ringo Starry", 
       date: "2013-12-02T17:57:28.556094Z" 
      }, { 
       rating: 2, 
       comment: "It's your birthday, we're gonna party!", 
       author: "25 Cent", 
       date: "2011-12-02T17:57:28.556094Z" 
      } 

      ] 
     }; 

     this.dish = dish; 

     }); 
    </script> 

    </body> 

</html> 
+0

Большое спасибо за быстрый ответ. – user3148810

1

Замените блюдо на деталиCtrl.dish в html. Например, вместо dish.name, используйте detailCtrl.dish.name в HTML

Смежные вопросы