我想有一个白手起家导航栏的显示,并从一个角度控制器中删除HTML元素被告上的数据。
I'm trying to have a bootstraps navbar display and remove html elements defendant on data from an angular controller.
我有以下的玉code:
I have the following jade code:
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
和具有以下控制器:
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('/')
})
}
}
一切,直到 $ scope.authenticated
设置为假
和 $正确显示scope.user
设置为 {}
,其中没有NG-显示属性中的导航栏被更新。
Everything displays properly until the $scope.authenticated
is set to false
and $scope.user
is set to {}
where none of the ng-show attributes are updated in the nav-bar.
什么我需要做的,有白手起家的导航元素在 $范围变化作出响应
变量?
What do I need to do to have the bootstraps nav elements respond to the change in the $scope
variables?
在角$作用域属性更改外部的角度, $范围。$适用()
需要调用导致角进入其消化循环。被投射到当前视图的任何属性将有$手表,其循环消化将评估。当在这些$手表中的一个检测到的改变,该视图被更新。
When Angular $scope properties are changed "outside" of Angular, $scope.$apply()
needs to be called to cause Angular to enter its digest loop. Any properties that are projected onto the current view will have $watches, which the digest loop will evaluate. When a change is detected in one of these $watches, the view is updated.
的例子的角外:
浏览器事件回调。例如,搜索 element.bind('someEvent',函数(){
结果    //需要调用范围。$适用于此处
结果})
第三方插件回调。例如,回调传递给注销
以上。第三方AJAX回调。第三方承诺。
Browser event callback. E.g., element.bind('someEvent', function() {
//need to call scope.$apply in here
})
Third-party plugin callback. E.g., the callback passed to logout
above.
Third-party AJAX callback.
Third-party promise.