隐藏基于Angular中的routeparam的导航栏

Question

我需要根据网址参数?hideBars=true"隐藏导航栏。

使用$scope.hideBars = $routeParams;，这将返回{hideBars: "true"}如果网址具有参数?hideBars=true，我需要能够隐藏导航。

导航栏有<header id="header-main" ng-hide="hideNav">，因此如果hidNav为true，则应该隐藏它。但是，这并不是有效的。

Answer 1

将$scope.hideBars = $routeParams更改为$scope.hideBars = $routeParams.hideBars。

同时将<header id="header-main" ng-hide="hideNav">更改为<header id="header-main" ng-hide="hideBars">

<强>为什么吗

ng-hide正在寻找一个布尔值，但你传递了一个对象。您还ng-hide评估了与范围不同的值。从本质上讲，它总是false。

Answer 2

我尝试创建一个对您有用的示例;

在网址中传递query-strings有时会出现问题undefined，如果您遇到此类错误，请使用spliter函数获取query-string 其他只需将您的查询目标传递给$scope.hideBars即可显示结果。

在此示例中，我们有/?hideBars=true&somthing=flase&others=12个网址，spliter可帮助您将网址设为object，如下所示：

{hideBars: true, somthing: false, others: '12'}

  

记住：在控制器中注入$location

为什么 ng-if

如果你的元素是高度安全性使用它，因为它甚至会隐藏用户在浏览器上选择inspect，否则使用ng-hide来处理它。

查看

<div ng-if="!hideBars">
    Hide if `hideBars=true`
</div>

<强>控制器

var app = angular.module('app', []);

app.controller('ctrl', function ($scope, $location) {
   var spliter = function () {
       var object = {};
       var splitLocation = $location.$$absUrl.split("?");
       var target = splitLocation[1];
       var splitTargets = target.split("&");
            angular.forEach(splitTargets, function (params) {
                var splitParam = params.split("=");

                switch (splitParam[1]) {
                    case "true":
                        object[splitParam[0]] = true;
                        break;
                    case "false":
                        object[splitParam[0]] = false;
                        break;
                    default:
                        object[splitParam[0]] = splitParam[1];
                        break;
                }
            });
            return object;
        }

        var params = spliter();

        $scope.hideBars = params.hideBars;
});

Answer 3

if ($routeParams.hideBars && $routeParams.hideBars == 'true') {
    $scope.hideNav = true;
} else {
    $scope.hideNav = false;
};

Answer 4

我想出了另一个更简单的解决方案。在控制器内，简单使用：

$scope.hideBars = $routeParams.hideBars;`. 

当

?hideBars=true

位于网址中，每个页面都需要隐藏导航，只需应用以下样式：

<style ng-if="hideBars">
#header-main {
    display: none;
}
</style>