twitter-bootstrap AngularJs：根据路线隐藏导航栏元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23838042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs: Hide navbar element based on route?
提问by Eddie
I'm trying to figure out how to show or hide an element in my navbar based on the route, or the current view being displayed. For example, I have an basic/advanced toggle button that I put in the navbar (Bootstrap 3) when the user is on the search form. But when they are anywhere else in the app that toggle button should be hidden.
我试图弄清楚如何根据路线或正在显示的当前视图在我的导航栏中显示或隐藏元素。例如，当用户在搜索表单上时，我将一个基本/高级切换按钮放在导航栏（Bootstrap 3）中。但是当他们在应用程序中的其他任何地方时，应该隐藏切换按钮。
In terms of the DOM, it's just a list item that builds out the nav. I'm not sure if I should show or hide based on a global value that gets set on each view, or if I can just use the route or view name. If so how that would work?
就 DOM 而言，它只是一个构建导航的列表项。我不确定是否应该根据在每个视图上设置的全局值来显示或隐藏，或者我是否可以只使用路由或视图名称。如果是这样，那将如何运作？
Thanks!
谢谢！
回答by dylants
One solution is to build a function in the controller that is responsible for the navbar that could be queried to determine if the element should be displayed:
一种解决方案是在控制器中构建一个函数，该函数负责可以查询导航栏以确定是否应显示元素：
$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
(The above code uses Angular's $locationservice)
（以上代码使用了 Angular 的$location服务）
Then within the template, you can show/hide based on the result of the call (passing in the route that should toggle displaying the element):
然后在模板中，您可以根据调用结果显示/隐藏（传入应该切换显示元素的路由）：
ng-show="isActive('/search-form')"
回答by Andy Gaskell
Here's the approach I took with ui-router:
这是我对ui-router采取的方法：
I only want to hide the navbar for a small number of pages so I went with an opt out property on the state(s) that I want to hide the navbar.
我只想隐藏少数页面的导航栏，所以我在要隐藏导航栏的状态上使用了一个选择退出属性。
.state('photos.show', {
url: '/{photoId}',
views: {
"@" : {
templateUrl: 'app/photos/show/index.html',
controller: 'PhotoController'
}
},
hideNavbar: true
})
Inject $statein your navbar's controller and expose it to the template:
注入$state导航栏的控制器并将其公开给模板：
$scope.state = $state;
Then add ng-hideto your navbar template:
然后添加ng-hide到您的导航栏模板：
<nav ng-hide="state.$current.hideNavbar" ...
回答by soloproper
Above works perfectly using ui-router don't forget to pass $scopeand $statewithin your function
以上使用 ui-router 完美运行不要忘记传递$scope和$state在你的函数中
Example:
例子：
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 :)
});