Question

我有3个html页面。 1. Index.html 2. MasterPagenvarBar.html 3. ContentPage.html

**在Index.html中调用MasterpagenavBar.html和ContentPage.html .below是我的代码。

  <body ng-app="theapp">  
        <div ng-include="'../Views/MasterPageNavBar.html'"></div>
        <div ng-include="'../Views/ContentPage.html'"></div>
    </body>

**在MasterpageNavBar.html折叠功能（数据切换）工作正常，当我单独运行此页面时。

当我将MasterPage.NavBar.html和ContentPage.html合并到＆＃39; Index.html＆＃34;崩溃不起作用。当用户点击切换图标按钮时，可能是Contentpage.html不允许空格显示导航栏内容。

这是我的＆＃34; MasterPageNavBar.html＆＃34;代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.css" rel="stylesheet" />
    <script src="../Scripts/angular-ui-router.js"></script>
    <script src="../Scripts/angular-ui-router.min.js"></script>
    <script src="../Scripts/Collapse.JS"></script>

</head>
<body>
    <div>
        <div>
            <h3>AngularJS Tutorial</h3> 
            <nav class="navbar  navbar-inverse">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-target="#mynavbar" data-toggle="collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

                    </button>
                </div>
                <div class="collapse navbar-collapse" id="mynavbar">
                    <ul class="nav navbar-nav">
                        <li class="active"><a data-ui-sref="home">Home</a></li>
                        <li><a data-ui-sref="contactus">Contact</a></li>
                        <li><a href="">Gallery</a></li>
                        <li><a href="">About</a></li>
                    </ul>
                    <ul class="nav navbar-right navbar-nav">
                        <li><a href="#">Login/SignUp</a></li>
                    </ul>
                </div>

            </nav>
        </div>

    </div>
</body>
</html>

这里是＆＃34; ContentPage.html＆＃34;代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="../Scripts/main.js"></script>

    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body class="container" data-ng-app="theapp">
    <div class="well">
        <header>Content Page</header>
        <div data-ui-view=""></div>
    </div>

</body>
</html>

NavBar崩溃无法使用ng-include

0 个答案: