I have the following angular code in header.html
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li ng-if='loginState.loggedIn' class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
id="userDropdown"
role="button"
aria-haspopup="true" aria-expanded="false">
{{loginState.currentUser}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" data-toggle="collapse" aria-labelledby="userDropdown">
<li><a ui-sref="app.profile">Your Profile</a></li>
<li><a ui-sref="app.settings">Settings</a></li>
</ul>
</li>
<!-- this would work
<li><a ui-sref="app.profile">Your Profile</a></li>
-->
</ul>
</div>
The states code are very straightforward:
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/',
views: {
'header': {
templateUrl: 'static/templates/header.html',
},
'content': {
templateUrl: 'static/templates/landing.html',
},
'footer': {
templateUrl: 'static/templates/footer.html',
}
}
})
.state('app.profile', {
url: 'profile',
views: {
'content@': {
templateUrl : 'static/templates/profile.html',
controller : 'ProfileController'
}
}
})
;
$urlRouterProvider.otherwise('/');
}])
So basically once logged in, I would have a dropdown from the top right corner, and I want to transit to other states when clicking entries in dropdown menu.
However, when clicking Your Profile nothing happens, the state has not gone to app.profile. If I move the ui-sref out of the dropdown and to the navbar directly(like the commented code), it works perfectly fine.
So is there something prevent ui-sref from working in a bootstrap dropdown?
