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.