In the header.html file, I have the following angular code:
<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 pi-sref="app.settings">Settings</a></li>
</ul>
</li>
<!-- this would work
<li><a pi-sref="app.profile">Your Profile</a></li>
-->
</ul>
</div>
The angular states configuration is as follows:
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('/');
}])
Upon logging in, a dropdown should appear in the top right corner. When clicking on items in the dropdown menu, it should transition to other states.
However, when clicking on Your Profile, nothing happens and the state does not change to app.profile. When I move the ui-sref outside of the dropdown and into the navbar directly (like in the commented-out code), it works correctly.
Is there something preventing the ui-sref from functioning within a bootstrap dropdown?