I'm having a global menu in a AngularJS app. I don't wan't to show some links on certain paths. I have tried the following. In my controller:

$scope.location = $location;

In my view:

<div ng-if="location.path() != /signup">
  [Content] 
</div>

But I can't get it to work. Any ideas?

Also, is there a way to print out the current path on the page somehow?

I'm having a global menu in a AngularJS app. I don't wan't to show some links on certain paths. I have tried the following. In my controller:

$scope.location = $location;

In my view:

<div ng-if="location.path() != /signup">
  [Content] 
</div>

But I can't get it to work. Any ideas?

Also, is there a way to print out the current path on the page somehow?

• javascript
• html
• css
• angularjs

2 Answers 2

You should look at "ng-show" and "ng-hide". They can be used to conditionally show and hide content on a page quite easily. An example would be:

<div ng-show="myBoolean">Content will show when myBoolean is true</div>

You can replace "myBoolean" with a call to a function in scope that will check the path or do whatever it is that you need to check. I believe this should do more or less what you are looking for! For more documentation on ng-show see here.

In case the documentation or my example are difficult to read I wrote up a plunkr for you quickly (http://plnkr.co/edit/6fUZDzzGsRjowPOJZ6He?p=preview). Basically this just shows how to use the ng-hide/ng-show directive (they are the same, just opposites of each other). The key routine that I wrote is:

 $scope.checkToggle = function(){
   // replace "myBoolean" with the logic that checks the path
   return $scope.myBoolean;
 };

Just replace that logic with what you want to check on the location and it should hide/show correctly. The really nice thing about using this particular directive is you can easily support css animations/transitions which will allow you to nicely fade your element in or out of the page as you hide and show it. Hope this all helps. Best of luck!

Just quote the string you are comparing your variable to :

<div ng-if="location.path() != '/signup'">
  [Content] 
</div>

As said by drew_w, you should probably try ng-show, since you are using $location, you probably are creating a single-page app, where reloading the DOM would be less efficient than just hiding or showing it.

To print it, just put

{{location.path()}}

anywhere the controller with your $scope.location has effect.