gpt4 book ai didi

javascript - AngularJS Bootstrap 导航栏

转载 作者:行者123 更新时间:2023-11-29 14:57:21 25 4
gpt4 key购买 nike

我正在尝试显示一个 Bootstrap 导航栏,并从一个 Angular Controller 中删除受数据影响的 html 元素。

我有以下 Jade 代码:

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

以及具有以下内容的 Controller :

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 属性。

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

最佳答案

当 Angular 的 $scope 属性在 Angular 的“外部”被改变时,需要调用 $scope.$apply() 来让 Angular 进入它的 digest loop。 .投影到当前 View 上的任何属性都将有 $watches,摘要循环将对其进行评估。当在其中一个 $watches 中检测到变化时, View 会更新。

Angular 的“外部”示例:

  • 浏览器事件回调。例如,
    element.bind('someEvent', function() {
    //需要在此处调用 scope.$apply
    })
  • 第三方插件回调。例如,回调传递给上面的 logout
  • 第三方 AJAX 回调。
  • 第三方 promise 。

关于javascript - AngularJS Bootstrap 导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15672278/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com