have an angular application that I want to hide one of the 'included views' if the main view is the homepage view.
<div id="page" ng-class="{ showNav: $root.showNav }">
<header id="pageHeader" ng-controller="HeaderCtrl" data-ng-include="'views/includes/header.html'"></header>
<div id="pageHero" ng-show='$rootScope.fullView' ng-controller="MainsearchCtrl" data-ng-include="'views/mainSearch.html'"></div>
<div id="pageContent" ng-view=""></div>
</div>
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:
// in SystemServce:
// then in the navigtion controller:
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.
Just use ng-show with a negative expression:
You'll have to set the value of
location
on your controller$scope
in your controller; possibly using the$route
or$location
providers.You can inject either
$route
or$location
into your controller, fetch needed value from one of these services and use it inng-show
orng-if
.Example of using
$route
and$location
you can see here.Here is one of possible ways of doing it:
JavaScript
routeTemplate.html
Plunker: http://plnkr.co/edit/sZlZaz3LQILJcCywB1EB?p=preview