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
Post a Comment