[SOLVED] AngularJS: How to conditionally display an element outside of ng-view?

AngularJS: How to conditionally display an element outside of ng-view?

Considering the following Angular 1.X index.html file:

<div ng-app="app" class="hero-unit">
    <a ng-show="!isHomePage" href="#!/home">Home</a>
    <div class="container-fluid">
        <div ng-view></div>
    </div>
</div>

I would like to display the element <a ng-show="!isHomePage" href="#!/home">Home</a> only when the location is not the home page? How should I proceed? Should I map this element on a dedicated controller as mainController? Is that a good practice?

Solution

Ways to achieve this :

You can create a parent level controller(outside ng-view) in the application and then check the current route and based on that implement the condition.
Home

To get the current path you can use :

app.run(function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {
        console.log(current.originalPath); // Do not use $$route here it is private
    });
});

OR

$location.path()

You can use $scope.$emit if you want to do it based on any event in the view.$emit will help in communication between child to parent.
You can create an angular service through that you can pass the current state of the application and based on that implement the condition.