AngularJs:基于路由隐藏导航栏元素

AngularJs: Hide navbar element based on route?

本文关键字：隐藏 导航 元素 路由 于路由 AngularJs      更新时间：2023-09-26

我试图找出如何显示或隐藏一个元素在我的导航栏基于路由，或当前视图显示。例如，我有一个基本/高级切换按钮，我放在导航栏(Bootstrap 3)，当用户是在搜索表单。但当他们在应用程序的其他地方切换按钮应该隐藏。

就DOM而言，它只是一个构建导航的列表项。我不确定我是否应该显示或隐藏基于在每个视图上设置的全局值，或者我是否可以只使用路由或视图名称。如果是这样，那将如何运作呢?

谢谢!

一种解决方案是在控制器中构建一个函数，该函数负责导航条，可以查询该函数以确定是否应该显示该元素:

$scope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

(上面的代码使用了Angular的$location服务)

然后在模板中，你可以根据调用的结果显示/隐藏(传入应该切换显示元素的路由):

ng-show="isActive('/search-form')"

下面是我使用ui-router的方法:

我只想在少数页面隐藏导航条，所以我在想要隐藏导航条的状态上使用了一个选择退出属性。

.state('photos.show', {
  url: '/{photoId}',
  views: {
    "@" : {
      templateUrl: 'app/photos/show/index.html',
      controller: 'PhotoController'
    }
  },
  hideNavbar: true
})

在导航栏的控制器中注入$state，并将其暴露给模板:

$scope.state = $state;

然后将ng-hide添加到导航条模板:

<nav ng-hide="state.$current.hideNavbar" ...

上面的工作完美使用ui-router不要忘记传递$scope和$state在你的功能

例子: 

    app.controller('LoginCtrl', function($scope, $state){
        $scope.state = $state;
        console.log($state); // this will return the current state object just in case you need to see whats going on for newbies like me :)
    });

相关文章：