Title: AngularJS ng-if to display header content based on the route location
Tags: javascript;angularjs
Question: I have a SPA that requires a different header to display based on which route location the user is on. It seems like the code I have should be working but it produces an error like this: TypeError: undefined is not a function
What am I missing here:
<html lang="en" ng-app="configApp"&gt;
<head&gt;
<meta charset="utf-8"&gt;
<meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
<!--<meta name="viewport" content="width=device-width, initial-scale=1"&gt;--&gt;
<title&gt;Configuration Admin</title&gt;
<!-- Bootstrap CSS --&gt;
<link href="_/css/bootstrap.css" rel="stylesheet"&gt;
<link href="_/css/main-styles.css" rel="stylesheet"&gt;
</head&gt;
<body&gt;
<div class="container"&gt;
<!-- Header--&gt;
<div class="row"&gt;
<!-- Header to be shown when a program is edited--&gt;
<div ng-include="'templates/headers/nav-icons.html'" ng-if="showNavIcons"&gt;</div&gt;
<!-- Header to be shown when Dashboard view--&gt;
<div ng-include="'templates/headers/nav-logo.html'" ng-if="hideNavIcons"&gt;</div&gt;
</div&gt; <!-- end header --&gt;
</div&gt;
<!-- Scripts --&gt;
<script src="_/js/bootstrap.js"&gt;</script&gt;
<script src="_/js/main-scripts.js"&gt;</script&gt;
<script src="_/js/angular.min.js"&gt;</script&gt;
<script src="_/js/angular-route.min.js"&gt;</script&gt;
<script src="_/js/ui-bootstrap-tpls-0.11.0.min.js"&gt;</script&gt;
<script src="_/js/router.js"&gt;</script&gt;
</body&gt;
</html&gt;
var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap'])
.config(function($routeProvider){
$routeProvider.when('/dashboard', {
templateUrl: 'templates/dashboard/home.html'
// controller: 'HomeController'
})
.when('/organizations', {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: 'OrganizationController',
activetab: 'organizations'
})
.when('/program-details-edit', {
templateUrl: 'templates/dashboard/organizations/programs/program-details-edit.html',
controller: 'ProgramDetailsEdit'
})
.otherwise( {redirectTo: '/dashboard'} );
// Side Nav Link Controllers
configApp.controller('OrganizationController', function($scope) {});
configApp.controller('SideNavCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
configApp.controller('ProgramDetailsEdit', ['$scope', '$location', '$route', function($scope, $route, $location) {
$scope.showNavIcons = $location.path() === '/program-details-edit';
configApp.controller('OrganizationController', ['$scope', '$location', '$route', function($scope, $route, $location) {
$scope.hideNavIcons = $location.path() === '/organizations';
$scope.$route = $route;

Here is the accepted answer: You need to add the controllers to the elements. "ng-controller='controllerName'" as an attribute. As far as the type error it is undefined however if you do... !!variable then undefined becomes false.
<div class="row" ng-controller="ProgramDetailsEdit"&gt;
<!-- Header to be shown when a program is edited--&gt;
<div ng-include="'templates/headers/nav-icons.html'" ng-if="!!showNavIcons"&gt;
</div&gt;
ng-controller will give the dom inside of the dive access to everything that it puts into the $scope variable that you set in it.
As a side note you should look at UI-Router https://github.com/angular-ui/ui-router
it's a lot easier and more powerful then $routeProvider and you would be able to instead do something along the lines of the follow...
<div class="row" ng-controller="appController"&gt;
<!-- Header to be shown when a program is edited--&gt;
<div ng-include="'templates/headers/nav-icons.html'" ng-if="state.name == 'programEditor'"&gt;
</div&gt;
Comment for this answer: It goes in your html e..g





Comment for this answer: I editing the answer to make it complete.
I would suggest that you have a nav controller that handles it separately. Have the mainController expose provider route and use if location=='navLocation'. If there are many variables have the main controller set $rootScope.showNav=false; and every other controller can still access it to modify it with $rootScope.showNav=true;
Comment for this answer: I see. Where do I call this new controllerName in the javascript file?
Comment for this answer: The app is going to have many different views, so the idea is to be able to assign the correct header to display depending on which view and location the user is on.

Here is another answer: It might be the missing ng-controller tag on your html chrome.
Something like below :






Here is another answer: Problem easily solved by using the angularJS ui router instead of ngRouter. Thanks for all the guidance on directing me to the perfect solution.
Heres how I solved it:
Javascript
var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap','ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/dashboard");
// ui router states
$stateProvider
.state('cas', {
url: "/cas",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: function($scope) {}
}
}
})
.state('applications', {
url: "/applications",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/application/applications-title.html',
controller: function($scope) {}
}
}
})
.state('organizations', {
url: "/organizations",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: function($scope) {}
}
}
})
.state('program-details', {
url: "/program-details",
views: {
header: {
templateUrl: 'templates/headers/nav-icons.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/programs/program-details.html',
controller: function($scope) {}
}
}
})
.state('program-details-edit', {
url: "/program-details-edit",
views: {
header: {
templateUrl: 'templates/headers/nav-icons.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/programs/program-details-edit.html',
controller: function($scope) {}
}
}
});
<html lang="en" ng-app="configApp"&gt;
<head&gt;
<meta charset="utf-8"&gt;
<meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
<!--<meta name="viewport" content="width=device-width, initial-scale=1"&gt;--&gt;
<title&gt;Configuration Admin</title&gt;
<!-- Bootstrap CSS --&gt;
<link href="_/css/bootstrap.css" rel="stylesheet"&gt;
<link href="_/css/main-styles.css" rel="stylesheet"&gt;
</head&gt;
<body&gt;
<div class="container"&gt;
<!-- Header--&gt;
<div class="row" ng-controller="NavCtrl"&gt;
<div ui-view="header"&gt;</div&gt;
</div&gt; <!-- end header --&gt;
<section class="main-content"&gt;
<div class="row"&gt;
<!-- Sidebar --&gt;
<div class="col-xs-3 sidebar"&gt;
<!-- Pullout menu --&gt;
<nav id="sidebar-pullout"&gt;
<!--<li&gt;<a href="#/application-settings"&gt;application</a&gt;</li&gt;--&gt;
<!--<li&gt;<a href="#/organization-settings"&gt;organization</a&gt;</li&gt;--&gt;
<div id="menu-listings"&gt;</div&gt;
</nav&gt;
<!-- end pullout--&gt;
<div ng-controller="SideNavCtrl"&gt;
<ul class="list-unstyled side-nav"&gt;
<li ng-class="{active:isActive('/cas')}"&gt;<a id="showCas" href="#/cas" ui-sref="cas"&gt;cas</a&gt;</li&gt;
<li ng-class="{active:isActive('/applications')}"&gt;<a href="#/applications" ui-sref="applications"&gt;application</a&gt;</li&gt;
<li ng-class="{active:isActive('/organizations')}"&gt;<a  href="#/organizations" ui-sref="organizations"&gt;organization</a&gt;</li&gt;
</ul&gt;
</div&gt;
</div&gt; <!-- Side Bar end --&gt;
<!-- Page Content --&gt;
<div class="col-xs-9 main-page"&gt;
<div ui-view="content"&gt;</div&gt;
</div&gt;  <!-- Page content end --&gt;
</div&gt;
</section&gt; <!-- End main Content --&gt;
</div&gt;
<!-- Scripts --&gt;
<script src="_/js/bootstrap.js"&gt;</script&gt;
<script src="_/js/main-scripts.js"&gt;</script&gt;
<script src="_/js/angular.min.js"&gt;</script&gt;
<script src="_/js/angular-route.min.js"&gt;</script&gt;
<script src="_/js/angular-ui-router.min.js"&gt;</script&gt;
<script src="_/js/ui-bootstrap-tpls-0.11.0.min.js"&gt;</script&gt;
<script src="_/js/router.js"&gt;</script&gt;
</body&gt;
</html&gt;

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:06/29/14', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><angularjs>', 'Title': 'AngularJS ng-if to display header content based on the route location', 'ViewCount': 4340, 'id': 24480214, 'user_AboutMe': '', 'user_AccountId': 3306232.0, 'user_DisplayName': 'jmccommas', 'user_Reputation': 557.0, 'user_Views': 105.0, 'user_id': 2780966.0}}