I have a Angularized bootstrap menu that works if it is loaded in a view, but not when in the index.html. I need it in the index.html before the views (data-ng-view) since I have content between the menu and views. When placed before my views in the index.html page, if I click on a link, I am able to go that link... but the menu stays open instead of closing after going to a link. I am using AngularUI and have injected 'ui.bootstrap' into the App (that is how it works when loaded in a view). The controllers for my views are tied to the page they relate to.
Example:
when('/home', { templateUrl: './views/home.html', controller: 'homeCtrl' }).
Here is my navigation:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-ng-init="isCollapsed = true" data-ng-click="isCollapsed = !isCollapsed">
<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="/"><h1 id="pfch1">My Title</h1></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li><a href="/home">Home</a></li>
<li class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
<a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/categories/1/cat1">cat1</a></li>
<li><a href="/categories/2/cat2">cat2</a></li>
<li><a href="/categories/5/cat3">cat3</a></li>
<li><a href="/categories/4/cat4">cat4</a></li>
<li><a href="/categories/6/cat5">cat5</a></li>
<li><a href="/categories/3/cat6">cat6</a></li>
</ul>
</li>
<li><a href="/add-article">Add Article Link</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<div data-ng-controller="userInfo">
<div data-ng-controller="loginCtrl" data-ng-hide="loggedin">
<input class="btn btn-default" type="submit" value="Login" data-ng-click="login()" />
</div>
<div data-ng-controller="loginCtrl" data-ng-show="loggedin">
<input class="btn btn-default" type="submit" value="Signout" data-ng-click="logout()" />
</div>
</div>
</div>
</form>
</div>
</nav>
Here is the relevant section of index.html (please note that the menu above is included via an ng-include. I have tried it without the ng-include but it still doesn't collapse):
<body>
<!-- Container start -->
<div class="container">
<!-- Top Menu -->
<div data-ng-include="'templates/topmenu.html'"></div>
<div data-ng-view></div>
<hr>
<footer>
<p>© My Site 2015</p>
</footer>
</div>
<!-- Container end -->
</body>
Aucun commentaire:
Enregistrer un commentaire