All of the examples for Angularjs using partial.html files show simple links to change to these views. When I tried to change these to buttons to get a nicer looking page, i discovered that the buttons wouldn’t show which was the active button. To accomplish this task, I created a new controller called NavCrtl. The secret sauce for reaching out of the partial back to the navbar is located in that controller. As with all Angularjs applications, you need to add ng-controller to the div that contains the navbar ( ng-controller=”NavCtrl” ). ng-class=”{ active: activePath==’/view1′ }” links back to the controller to switch which button is active.

        <div class="navbar navbar-fixed-top" ng-controller="NavCtrl">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a href="#" class="brand">SR Demo</a>  
                    <div class="navbar-text pull-right">Logged in as <a href="#">username</a></div>
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">Menu </a>
                    <div class="nav-collapse">
                            <div class="btn-toolbar">
                                <div class="btn-group">
                                    <a href="#/view1" class="btn btn-large" ng-class="{ active: activePath=='/view1' }">Overview</a>
                                    <a href="#/view2" class="btn btn-large" ng-class="{ active: activePath=='/view2' }">SR Input</a>
                                    <a href="#/view3" class="btn btn-large" ng-class="{ active: activePath=='/view3' }">SR Output</a>
                                    <a href="#/view4" class="btn btn-large" ng-class="{ active: activePath=='/view4' }">Map</a>
                    <!--/.nav-collapse -->

the controllers.js file…

 angular.module('myApp.controllers', []).  
 controller('MyCtrl1', ['$scope', function($scope) {  
 .controller('NavCtrl', ['$scope', '$location', '$route',function($scope, $location, $route) {  
 //NavCtrl to ensure that menu buttons stay pushed in ("active" ) when active in the menu nav bar  
 $scope.activePath = null;  
   $scope.$on('$routeChangeSuccess', function() {  
     $scope.activePath = $location.path();  

Comments are closed.