index.html#而不是index.html

时间:2016-03-01 04:10:19

标签: html angularjs

我通过插入

来尝试Angular模板
<ng-include src=="'menu.html'"></ng-inlude>
&#34; index.html&#34;的页眉和页脚之间的

指令文件。网页在firefox中正确显示,但chrome不显示模板。它加载一个名为&#34; index.html#&#34;的文件。我的app文件夹中不存在。我完全不知道这里发生了什么,在网络搜索中没有发现类似的情况。谢谢你的帮助!

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

<title>Ristorante Con Fusion</title>    

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

<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="'dishdetail.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>

menu.html:

    <div class="container">
    <div class="row row-content" ng-controller="MenuController">
        <div class="col-xs-12">

            <button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right"                    
                type="button">{{showDetails ? 'Hide Details':'Show Details'}}
            </button> 

            <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">
                    <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="{{dish.name}}">
                            </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 ng-show="showDetails">{{dish.description}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

4 个答案:

答案 0 :(得分:0)

可能是angular将#添加到url字符串的末尾。这是一个较旧的解决方法,用于防止非html5浏览器发送http请求并在单页应用上重新加载整个页面内容。

但是查看index.html以及menu.html文件会很有帮助。

答案 1 :(得分:0)

如果您想将其称为标记,则必须添加src值

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

此外,您可以添加ng-include作为属性:

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

祝你好运!

答案 2 :(得分:0)

我认为这是html5mode问题。在angular config中使用$locationProvider.html5Mode(true);

答案 3 :(得分:0)

问题是Chrome等没有显示本地文件。您必须使用简单的Web服务器检查它们,或者将--allow-file-access-from-files添加到google.exe命令。 Firefox默认提供对本地文件的访问。这就是模板在Firefox中显示的原因。