twitter bootstrap - NavBar collapse not working with ng-include -


i have 3 html pages. 1. index.html 2. masterpagenvarbar.html 3. contentpage.html

** in index.html calling masterpagenavbar.html , contentpage.html .below code.

  <body ng-app="theapp">           <div ng-include="'../views/masterpagenavbar.html'"></div>         <div ng-include="'../views/contentpage.html'"></div>     </body> 

** in masterpagenavbar.html collapse functionality(data-toggle) working fine , when run alone page.

when combine masterpage.navbar.html , contentpage.html in 'index.html" collapse not working. may contentpage.html not allowing space show navbar content when user clicks on toggle icon button.

here "masterpagenavbar.html" code

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

and here "contentpage.html" code.

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


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -