How can I use ng-hide if $ location.url == base (root) url?

Question

I need & larr; Return to the main page to appear below the origin on every page of my Angular application except the main page. Therefore, I would like to conditionally add a link and hide it with ng-hide if the url is already on the application’s home page (view).

I tried using Angular $location without success

 <p ng-hide="location.hash == '#/'" class="container"><a href="#topics">&larr; Back to Home</a></p> 

I tried the following options:

 ng-hide="location.hash == '#/' " //console.log shows true ng-hide="location.hash === '#/' " //console.log shows true ng-hide="location.hash == '' " //console.log shows false 

I am puzzled because if I register the value location.hash == '#/' when I get true on the home page, then ng-hide should work.

Basically I try the 3rd approach given here: How to use Angular ng-hide based on the page / route I am currently in? But that does not work. The other two approaches on this page seem too complicated for what I'm trying to achieve.

What am I missing?

Answer 1

First of all, when you use location.hash or location.url, you are actually using the javascript window.location object, you must use the $ location service provided by angular. Therefore, in your controller, I would create:

 $scope.currentPath = $location.path(); 

And in your html:

 <div ng-hide="currentPath === '/'"></div> 

Tho I would be careful about "# /" and "/", I only use html5 mode, so I'm not sure if the path will return $ location.path, but you can easily check it using console.log ($ location. path ()) tho I think it will return "/" because it is the path for angular, it should not care about #.

Answer 2

Angular is looking for a $scope variable called location . If you want this to work, you will need to:

 $scope.location = window.location 

in your controller. But then you really have to enter $location and set $scope.location = $location