AngularJS show div based on url/condition

Question

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?

Answer 1

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!

Answer 2

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.