I'm currently working on a project where I need to make a bootstrap navbar show and hide html elements based on data retrieved from an angular controller.
Below is the jade code snippet:
div.navbar.navbar-fixed-top
div.navbar-inner
div.container-fluid(data-ng-controller="NavCtrl")
a.btn.btn-navbar(data-toggle='collapse', data-target='.nav-collapse')
span.icon-bar
span.icon-bar
span.icon-bar
div.nav-collapse.collapse
ul.nav
li
a(href='/topics') Topics
li(ng-show="curUser.admin")
a(href='/users') Users
li(ng-show="curUser.admin")
a(href='/organizations') Organizations
li(ng-show="curUser.admin")
a(href='/topicConfs') TopicConfig
li.divider
ul.nav.pull-right
{{authenticated}}
li.dropdown(ng-show="authenticated")
a.dropdown-toggle(role='button', data-toggle='dropdown', href='#') {{curUser.email}}
b.caret
ul.dropdown-menu(role='menu')
li
a(href='/users/{{curUser._id}}') Profile
li.divider
li
a.btn(ng-click="logout()") Logout
Along with a controller that looks like this:
function NavCtrl($location, $scope, $rootScope, CurrentUser){
$scope.curUser = CurrentUser.getUser()
$scope.authenticated = CurrentUser.isAuthenticated()
$rootScope.$on('$routeChangeStart', function(){
$scope.curUser = CurrentUser.getUser()
$scope.authenticated = CurrentUser.isAuthenticated()
})
$scope.logout = function(){
CurrentUser.logout(function(result){
$scope.curUser = CurrentUser.getUser()
$scope.authenticated = CurrentUser.isAuthenticated()
console.log("authenticated before logout is %j", $scope.authenticated)
$location.url('/')
})
}
}
Everything works fine until $scope.authenticated is set to false and $scope.user is set to {}, at which point the ng-show attributes in the nav-bar do not update as expected.
How can I ensure that the bootstrap nav elements respond correctly to changes in the $scope variables?