角度のrouteparamに基づいてnavbarを非表示にする

Question

urlパラメータ?hideBars=true"に基づいてナビゲーションバーを非表示にする必要があります。

$scope.hideBars = $routeParams;を使用すると、これは{hideBars: "true"}を返します。URLにパラメータ?hideBars=trueがある場合、navを非表示にする必要があります。

navは<header id="header-main" ng-hide="hideNav">です。したがって、hidNavがtrueの場合は非表示にする必要があります。しかし、これは有効であるとは言えません。

Answer 1

変更$scope.hideBars = $routeParams~$scope.hideBars = $routeParams.hideBars。

また<header id="header-main" ng-hide="hideBars">

なぜに<header id="header-main" ng-hide="hideNav">を変更？

ng-hideはブール値を探していますが、オブジェクトに渡しました。また、ng-hideのスコープ上の値と異なる値に評価しました。本質的には、それは常にfalseでした。

Answer 2

私はあなたに役立つサンプルを作成しようとしています。あなたがエラー使用spliterこのような機能は、他のquery-stringだけの結果を表示するために$scope.hideBarsにクエリのターゲットを渡す取得するには、Get場合は、URLでquery-stringsを渡す

は時々undefined、などの問題が付属しています。我々は/?hideBars=true&somthing=flase&others=12 URLを持っているこのサンプルで

、spliterは、このようなobjectとしてURLを取得するのに役立ちます：

{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

私は別の、簡単な解決策を考え出しました。コントローラ内では、簡単な使用：

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