Toggle visibility of a ng-include depending on route
I have the following configuration:
$routeProvider
.when('/cars', { templateUrl: 'app/cars/index.html', controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { templateUrl: 'app/bikes/index.html', controller: 'BikesCtrl', reloadOnSearch: false });
and somewhere in my root index.html there is a:
<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-view></div>
Now, I want both views loaded and generated in the DOM at the same time, and show one of them depending on the route/URL.
Something like the following (not actual working code, just to give you an idea).
app.js:
$routeProvider
.when('/cars', { controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });
root index.html:
<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-include="'app/cars/index.html'" ng-show="carsVisible"></div>
<div ng-include="'app/bikes/index.html'" ng-show="bikesVisible"></div>
UPDATE: I know that ng-view kind of does this, but the difference, if subtle, exists. I want the html of each view to be generated once and stay in the DOM at all times.
Answer
I created a single RouteCtrl to load all of your views via ng-include. ng-view is not used. I inlined the templates. The templates could contain their own ng-controller directives to pull in specific controllers.
<body ng-controller="RouteCtrl">
<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-controller="RouteCtrl">
<div ng-include="'/cars.html'" ng-show="carsVisible"></div>
<div ng-include="'/bikes.html'" ng-show="bikesVisible"></div>
</div>
<script type="text/ng-template" id="/cars.html">
Cars template.
</script>
<script type="text/ng-template" id="/bikes.html">
Bikes template.
</script>
$routeProvider is still configured, but no template or controller is specified, causing the RouteCtrl to always be active. That controller listens for the $routeChangeSuccess event and manipulates the ng-show properties accordingly.
app.config(function($routeProvider) {
$routeProvider
.when('/cars', {} )
.when('/bikes', {})
});
app.controller('RouteCtrl', function($scope, $route, $location) {
$scope.$on('$routeChangeSuccess', function() {
var path = $location.path();
console.log(path);
$scope.carsVisible = false;
$scope.bikesVisible = false;
if(path === '/cars') {
$scope.carsVisible = true;
} else if(path === '/bikes') {
$scope.bikesVisible = true;
}
});
});
The idea for this solution is from @Andy.