Угловая, не показывающая результаты в браузере

Я занимаюсь угловым классом в Интернете и нахожу проблемы в том, как использовать ng-init, он отображает один и тот же код в моем html при открытии в браузере. Пожалуйста, мне нужна помощь в том, как решить эту проблему , Я попытался изменить угловую версии в файле формата JSON, но это не work.Thank вамУгловая, не показывающая результаты в браузере

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

 
<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-init=" 
 
         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.', 
 
          comment: '' 
 
         }"> 
 
      <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> 
 
           <p>Comment: {{dish.comment}}</p> 
 
         <p>Type your comment: 
 
         <input type="text" ng-model="dish.comment"></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    
 
<script src="../bower_components/angular/angular.min.js"></script> 
 
</body> 
 

 
</html>

источник

2016-08-13 Kwaku

Вы разместили ng-init директиву в теле div.

директива должна быть рядной с div тегом, как показано ниже:

<div class="row row-content" ng-init="dish={}"> 

</div>

Кроме того, я не вижу ng-app директиву. Вам понадобится это в вашем теле, чтобы позволить AngularJS подключаться к вашему приложению, оно помещается перед директивой ng-init.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app=""> 
 

 
    <div class="row row-content" ng-init="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.', 
 
          comment: '' 
 
         }"> 
 

 
    <p> 
 
     {{dish.name}} 
 
    </p> 
 
    
 
    <p> 
 
     {{dish.category}} 
 
    </p> 
 

 
    </div> 
 

 
</div>

Я также создал JSFiddle для вас, чтобы продемонстрировать эту работу:

https://jsfiddle.net/65LaufpL/

В качестве дополнительной записке вы можете захотеть взглянуть на контроллерах AngularJS и сохраните переменные dish, поскольку это было бы намного чище, чем использование ng-init директива.

источник

2016-08-13 07:00:56

Спасибо, что это сработало. Директива ng-app размещена в после DOCTYPE. – Kwaku

Вы должны поместить директиву ng-init в качестве атрибута тега div.

<div class="row row-content" ng-init="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.', 
    comment: '' 
}">

источник

2016-08-13 07:06:17

Спасибо Это сработало – Kwaku

Угловая, не показывающая результаты в браузере

ответ

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