AngularJS 引导导航栏答案

【问题标题】：AngularJS Bootstraps NavbarAngularJS 引导导航栏
【发布时间】：2013-03-18 07:50:26
【问题描述】：

我正在尝试使用引导导航栏显示并删除来自角度控制器的数据的 html 元素被告。

我有以下玉码：

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 设置为false 和$scope.user 设置为{} 之前，所有内容都正确显示，其中导航栏中的ng-show 属性均未更新。

我需要做什么才能让引导导航元素响应 $scope 变量的变化？

【问题讨论】：

尝试拨打$scope.$apply()。
谢谢。我如何给你一张支票作为答案？如果你能准确解释何时使用 $apply，那就太好了。
你能把完整的代码分享为 Plunkr 吗？

标签： javascript twitter-bootstrap angularjs pug navbar

【解决方案1】：

当 Angular “外部”更改 Angular $scope 属性时，需要调用 $scope.$apply() 以使 Angular 输入其 digest loop。投影到当前视图的任何属性都将具有 $watches，摘要循环将对其进行评估。当在其中一个 $watches 中检测到更改时，会更新视图。

Angular 的“外部”示例：

浏览器事件回调。例如，
element.bind('someEvent', function() {
//need to call scope.$apply in here
})
第三方插件回调。例如，上面传递给logout的回调。
第三方 AJAX 回调。
第三方承诺。

【讨论】：