3

ブートストラップ ナビゲーション バーを表示し、Angular コントローラーからのデータに対する 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('/')
    })
  }
}

が設定され、nav-bar で ng-show 属性が更新されない場所に設定$scope.authenticatedされるまで、すべてが適切に表示されます。false$scope.user{}

$scopeブートストラップ nav 要素が変数の変更に応答するにはどうすればよいですか?

4

1 に答える 1

2

Angular の $scope プロパティが Angular の「外部」で変更された場合、 を呼び出して、Angular がそのダイジェスト ループ$scope.$apply()に入るようにする必要があります。現在のビューに投影されるすべてのプロパティには、ダイジェスト ループが評価する $watches があります。これらの $watches のいずれかで変更が検出されると、ビューが更新されます。

Angular の「外側」の例:

  • ブラウザ イベントのコールバック。例えば、
    element.bind('someEvent', function() {
        //need to call scope.$apply in here
    })
  • サードパーティ プラグインのコールバック。たとえば、上記に渡されたコールバックlogout。
  • サードパーティの AJAX コールバック。
  • 第三者の約束。
于 2013-03-28T01:22:00.100 に答える