Twitter bootstrap 导航栏折叠不使用ng include_Twitter Bootstrap_Angular Ui Bootstrap

Twitter bootstrap 导航栏折叠不使用ng include

twitter-bootstrap

Twitter bootstrap 导航栏折叠不使用ng include,twitter-bootstrap,angular-ui-bootstrap,Twitter Bootstrap,Angular Ui Bootstrap,我有3个html页面。 1.Index.html 2.MasterPagenvarBar.html 3.ContentPage.html **在Index.html中调用MasterpagenavBar.html和ContentPage.html。下面是我的代码 <body ng-app="theapp"> <div ng-include="'../Views/MasterPageNavBar.html'"></div>

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

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

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

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

当我在“Index.html”中组合MasterPage.NavBar.html和ContentPage.html时，折叠不起作用。当用户单击切换图标按钮时，ContentPage.html可能不允许空间显示导航栏内容

这是我的“MasterPageNavBar.html”代码


AngularJS教程

下面是“ContentPage.html”代码


内容页

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

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