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" ...

Answer 3

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

示例：

＆＃13;

＆＃13;

    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 :)
    });

＆＃13;

＆＃13;

＆＃13;