I am working with a list of tabs and I need to track my current location every time I click on a specific tab. My MainCTRL controller, which is the parent of all tab controllers, needs to be aware of the active tab at any given moment. I attempted to use ng-click event along with $location.path() service to retrieve the current path. However, the issue I encountered was that it initially displayed the previous path instead of the current one. For demonstration purposes, I have included the code snippet below along with a corresponding codepen: http://codepen.io/Barak/pen/wGPpoZ
The reason for this requirement is that I want certain common buttons in the header to be disabled for a specific set of tabs while active for another group of tabs.
var app = angular.module('app',[]);
app.controller("MainCTRL",["$scope","$location", function($scope,$location){
$scope.title = "Hello World";
$scope.onWhichPageIAM = function(){
console.log("He clicked me");
console.log("location:",$location.path());
}
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<nav id="tabs_navbar" class="navbar-collapse collapse" ng-app="app" ng-controller="MainCTRL">
<ul class="tabs">
<li class="tabs-item">
<a href="#/AnalyticsSummary" class="tabs-link">Analytics Summary</a>
</li>
<li class="tabs-item">
<a href="#/TDCG" class="tabs-link" ng-click="onWhichPageIAM();">TDCG</a>
</li>
<li class="tabs-item">
<a href="#/keygas" class="tabs-link" ng-click="onWhichPageIAM();">Key Gas</a>
</li>
<li class="tabs-item">
<a href="#/DuvalTriangle" class="tabs-link" ng-click="onWhichPageIAM();">Duval Triangle</a>
</li>
<li class="tabs-item">
<a href="#/DuvalPentagon" class="tabs-link" ng-click="onWhichPageIAM();">Duval Pentagon</a>
</li>
<li class="tabs-item">
<a href="#/NEI" class="tabs-link" ng-click="onWhichPageIAM();">NEI</a>
</li>
<li class="tabs-item">
<a href="#/PTX" class="tabs-link" ng-click="onWhichPageIAM();">PTX</a>
</li>
<li class="tabs-item">
<a href="#/GasTrends" class="tabs-link" ng-click="onWhichPageIAM();">Gas Trends</a>
</li>
<li class="tabs-item">
<a href="#/DataTable" class="tabs-link" ng-click="onWhichPageIAM();">Data Table</a>
</li>
<li class="tabs-item">
<a href="#/Playground" class="tabs-link" ng-click="onWhichPageIAM();">Playground</a>
</li>
<li class="tabs-item">
<a href="#/AnalyticsSettings" class="tabs-link" ng-click="onWhichPageIAM();">Analytics Settings</a>
</li>
</ul>
</nav>