Question

这是我的代码。请告诉我我哪里错了。加载网页时未显示对象菜单。该网页仅为空白。我正在使用AngularJs。

<!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">
<link rel="stylesheet" href="hk.css">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-social.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row info" ng-init="dish={name:'Uthapizza',
                                         image:'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-md-12">
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#"><img class="img-thumbnail media-object" ng-src={{dish.image}}></a>
                </div>
                <div class="media-body">
                    <h2 class="media-heading">{{dish.name}}<span class="label label-dangerous label-xs">{{dish.label}}</span><span class="badge">{{dish.price}}</span></h2>
                    <p>{{dish.description}}</p>
                </div>
            </div>
         </div>
    </div>
 </div>

Answer 1

, json对象中缺少ng-init：

angular.js：13424错误：[$ parse：syntax]语法错误：令牌＆＃39;描述＆＃39;是意料之外的，期待[}]在第317栏的表达[dish = {name：＆＃39; Uthapizza＆＃39;，图像：＆＃39; uthapizza.png＆＃39;，

在说明

之前添加,

price:'4.99',
description:'A unique combination of ....

附注：

使用ng-init可以用于测试目的，但稍后会考虑使用controller。见AngularJS ng-init docs：

可以滥用此指令将不必要的逻辑量添加到模板中。 ngInit只有少数适当用途，例如对ngRepeat的特殊属性进行别名，如下面的演示所示;并通过服务器端脚本注入数据。 除了这几种情况，您应该使用控制器而不是ngInit来初始化范围上的值。

在此处ngInit转换为控制器heap->capacity = DEFAULT_CAPACITY;

Answer 2

这是plnkr工作得很好

http://plnkr.co/edit/IgjAHFOP27qhmEp75yNE?p=preview

<div class="container">
    <div class="row info" ng-controller="demo">
        <div class="col-md-12">
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#"><img class="img-thumbnail media-object" ng-src={{dish.image}}></a>
                </div>
                <div class="media-body">
                    <h2 class="media-heading">{{dish.name}}<span class="label label-dangerous label-xs">{{dish.label}}</span><span class="badge">{{dish.price}}</span></h2>
                    <p>{{dish.description}}</p>
                </div>
            </div>
         </div>
    </div>
 </div>

通过AngularJs创建的对象未出现在网页上

2 个答案: