8

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?

Anders
  • 2,903
  • 7
  • 58
  • 114

2 Answers2

12

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!

drew_w
  • 10,320
  • 4
  • 28
  • 49
  • i prefer this approach instead of if statement – daremachine Jan 14 '14 at 13:41
  • Got it to work using your answer. What I had forgot was to include `$location` in my controller definition. `MenuCtrl($rootScope, $scope, $window, $location)`. – Anders Jan 14 '14 at 20:40
6

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.

Jerska
  • 11,722
  • 4
  • 35
  • 54
  • I tried to put {{location.path()}} in my menu view, but then {{location.path()}} is displayed on the page (Aungular beginner), should I embed it in something else? – Anders Jan 14 '14 at 14:07
  • Have you surrounded it with `ng-app` (in html tag) and `ng-controller` (in any tag) ? – Jerska Jan 14 '14 at 14:13
  • Yes, it is inside a nav class that have my ng-controller in it. – Anders Jan 14 '14 at 14:16
  • Well, did your console throw errors ? And did your ng-if work ? – Jerska Jan 14 '14 at 14:18
  • No, still doesn't work. Find it quite strange. `$scope.location = $location;` in my controller and `
    ` in my view should work, or?
     – Anders Jan 14 '14 at 14:50
  • Yes it should. But as soon as you can't display a scope variable on the page, and `{{XXX}}` doesn't at least hide itself, there is either an error, either a missing something. :) – Jerska Jan 14 '14 at 15:01
  • Mhm. It seems like `$scope.location = $location.path();` breaks something. If I uncomment it (after removing the ng-if div) it works ( `{{XXX}}` hides). But if I keep the line `{{XXX}}` is printed. Strange... – Anders Jan 14 '14 at 15:10