How do I use angular ng-hide based on the page/route that I am currently on? How do I use angular ng-hide based on the page/route that I am currently on? angularjs angularjs

How do I use angular ng-hide based on the page/route that I am currently on?


You can inject either $route or $location into your controller, fetch needed value from one of these services and use it in ng-show or ng-if.

Example of using $route and $location you can see here.

Here is one of possible ways of doing it:

JavaScript

angular.module('app', ['ngRoute']).  config(['$routeProvider', function($routeProvider) {    $routeProvider.      when('/one', {        controller: 'routeController',        templateUrl: 'routeTemplate.html'      }).      when('/two', {        controller: 'routeController',        templateUrl: 'routeTemplate.html'      }).      otherwise({        redirectTo: '/one'      })  }]).  controller('routeController', ['$scope', '$location', function($scope, $location) {    $scope.showPageHero = $location.path() === '/one';  }]);

routeTemplate.html

<div>  <h1>Route Template</h1>  <div ng-include="'hero.html'" ng-if="showPageHero"></div>  <div ng-include="'content.html'"></div></div>

Plunker: http://plnkr.co/edit/sZlZaz3LQILJcCywB1EB?p=preview


Just use ng-show with a negative expression:

<div id=includedView ng-view="included" ng-show="location != '/main'"></div>

You'll have to set the value of location on your controller $scope in your controller; possibly using the $route or $location providers.


If you use routes you can run some logic on each route change in the resolve block in the routeprovider.

In the example below I'm using a custom SystemService service that stores the location and in turn broadcasts an event on $rootScope. In this example the navigation is outside of the views managed by the routed controllers and has its own controller:

app.config(['$routeProvider',  function($routeProvider) {    $routeProvider.      when('/', {      templateUrl: 'partials/welcome.html',      controller: 'WelcomeCtrl',      resolve: {        load: function(SystemService){                      SystemService.fireNavEvent({showNav:false,location:'/'});                    }      }    }).    when('/other', {      templateUrl: 'partials/other.html',      controller: 'ElseCtrl',      resolve: {        load: function(SystemService){                      SystemService.fireNavEvent({showNav:true,location:'/other'});                    }      }    }).    otherwise({      redirectTo: '/'  });}]);

// in SystemServce:

function fireNavEvent(obj){    this.showNav = obj.showNav;    $rootScope.$broadcast('navEvent',obj);}

// then in the navigtion controller:

$scope.$on("navEvent", function(evt,args){  $scope.showNav = SystemService.showNav;  // also some logic to set the active nav item based on location});

There are other ways to achieve this, for example you could just broadcast the navigation change on $rootScope directly from the routes config.

You could also inject $location into your controller and set the visibility based on that.