AngularJs:根据路线隐藏导航栏元素？

Question

我试图找出如何根据路线或当前显示的视图显示或隐藏导航栏中的元素.例如,当用户在搜索表单上时,我有一个基本/高级切换按钮,我放在导航栏(Bootstrap 3)中.但是,当他们在应用程序中的任何其他位置时,应该隐藏切换按钮.

就DOM而言,它只是一个构建导航的列表项.我不确定是否应该根据在每个视图上设置的全局值显示或隐藏,或者我是否可以使用路径或视图名称.如果是这样的话怎么样？

谢谢!

Answer 1

一种解决方案是在所述控制器,其负责可能被查询,以确定是否该元件应显示导航栏构建一个功能:

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

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

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

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

Answer 2

这是我用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" ...