Question

我正在线上进行角度课程并找到如何使用ng-init的挑战，当它在浏览器中打开时，它在我的html中显示相同的代码。我需要有关如何解决此问题的帮助。我尝试更改JSON文件中的角度版本，但它没有用。谢谢

＆＃13;

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

＆＃13;

Answer 1

您已将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指令更清晰。

Answer 2

您应该将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: ''
}">

Angular未在浏览器

2 个答案: