Estoy tomando una clase angular en línea y encuentro desafíos sobre cómo usar ng-init, muestra el mismo código en mi html cuando se abre en el navegador. Necesito ayuda sobre cómo resolver este problema. Intenté cambiar la versión angular en el archivo JSON pero no funcionó.Gracias

<!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>
1
Kwaku 13 ago. 2016 a las 09:58

2 respuestas

La mejor respuesta

Ha colocado la directiva ng-init en el cuerpo de div.

La directiva debe estar en línea con la etiqueta div como se muestra a continuación:

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

</div>

Además, no veo una directiva ng-app. Necesitará esto en su cuerpo para permitir que AngularJS se conecte a su aplicación, esto se coloca antes de la directiva 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>

También he creado un JSFiddle para que demuestre cómo funciona:

https://jsfiddle.net/65LaufpL/

Como nota adicional, es posible que desee ver los controladores AngularJS y almacenar las variables dish dentro de ellos, ya que sería mucho más limpio que usar la directiva ng-init.

0
Darren 13 ago. 2016 a las 07:09

Debe colocar la directiva ng-init como atributo de la etiqueta 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: ''
}">
0
Md. Al-Amin 13 ago. 2016 a las 07:06