Question

我试图在https://www.coursera.org/learn/angular-js/supplement/aVtFp/exercise-instructions-angular-templates处重复角度模板中的操作。然而，出了点问题，我无法弄清楚它是什么。

它看起来像

menu.html

<div class="container">
    <div class="row row-content" ng-controller="MenuController ">
         <div class="col-xs-12">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation"
                 ng-class="{active:isSelected(1)}">
                <a ng-click="select(1)"
                 aria-controls="all menu"
                 role="tab">The Menu</a></li>
                <li role="presentation"
                 ng-class="{active:isSelected(2)}">
                <a ng-click="select(2)"
                 aria-controls="appetizers"
                 role="tab">Appetizers</a></li>
                <li role="presentation"
                 ng-class="{active:isSelected(3)}">
                <a ng-click="select(3)"
                 aria-controls="mains"
                 role="tab">Mains</a></li>
                <li role="presentation"
                 ng-class="{active:isSelected(4)}">
                <a  ng-click="select(4)"
                 aria-controls="desserts"
                 role="tab">Desserts</a></li>
            </ul>
            <div class="tab-content">
           <ul class="media-list tab-pane fade in active">
           <ul class="media-list">
           <li class="media" ng-repeat="dish in dishes | filter:filtText">
                <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>
            </li>
        </ul>
        </div>
        </div>
    </div>
</div>

和index.html

<!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</title>    
        <!-- Bootstrap -->
<!-- build:css styles/main.css -->
    <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">
<!-- endbuild -->

    <!-- 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>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#/"><img src="images/logo.png" height=30 width=41></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#/">
                        <span class="glyphicon glyphicon-home"
                         aria-hidden="true"></span> Home</a></li>
                    <li><a href="#/aboutus">
                        <span class="glyphicon glyphicon-info-sign"
                         aria-hidden="true"></span> About</a></li>
                    <li><a href="#/menu">
                         <span class="glyphicon glyphicon-list-alt"
                         aria-hidden="true"></span> 
                         Menu</a></li>
                     <li><a href="#/contactus">
                     <i class="fa fa-envelope-o"></i> Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>         

    <header class="jumbotron">

        <!-- Main component for a primary marketing message or call to action -->

        <div class="container">
            <div class="row row-header">
                <div class="col-xs-12 col-sm-8">
                    <h1>Ristorante con Fusion</h1>
                    <p style="padding:40px;"></p>
                    <p>We take inspiration from the World's best cuisines, and create
                     a unique fusion experience. Our lipsmacking creations will 
                     tickle your culinary senses!</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                <p style="padding:20px;"></p>
                <img src="images/logo.png" class="img-responsive">
                </div>
                <div class="col-xs-12 col-sm-2">
                </div>
            </div>
        </div>
    </header>

     <ng-include src="'menu.html'"></ng-include>

    <footer class="row-footer">
        <div class="container">
            <div class="row">             
                <div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="col-xs-6 col-sm-5">
                    <h5>Our Address</h5>
                    <address>
                      121, Clear Water Bay Road<br>
                      Clear Water Bay, Kowloon<br>
                      HONG KONG<br>
                      <i class="fa fa-phone"></i>: +852 1234 5678<br>
                      <i class="fa fa-fax"></i>: +852 8765 4321<br>
                      <i class="fa fa-envelope"></i>: 
                         <a href="mailto:confusion@food.net">
                         confusion@food.net</a>
                    </address>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <div class="nav navbar-nav" style="padding: 40px 10px;">
                        <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
                        <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
                        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
                        <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
                        <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
                        <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
                    </div>
                </div>
                <div class="col-xs-12">
                    <p style="padding:10px;"></p>
                    <p align=center>© Copyright 2015 Ristorante Con Fusion</p>
                </div>
            </div>
        </div>
    </footer>

<!-- build:js scripts/main.js -->
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers.js"></script>
    <script src="scripts/services.js"></script>
<!-- endbuild -->

</body>

</html>

它们位于同一个文件夹中。我正在使用＆＃34;＆＃39;＆＃39;＆＃34;。谢谢你的帮助！

Answer 1

尝试在服务器上运行它。它应该工作。像讲师一样使用括号。

您没有加载任何内容的原因是因为您遇到XMLHttpRequest问题，您的浏览器无法加载跨源请求。

ng-include不适用于angularJS

1 个答案: