Using angularJS ui router with 3 ui views, Leftbar for showing menu, topbar for showing application title and actions and content view for displaying actual content.
Clicking links in leftbar trigger change in state which in turn change the view of the content correspondingly. At the same time, current usage of the tab will be highlighted.
Problem is the color highlight is wrong. Surfing content B highlights menu of title A.
Reasons and Solutions
The mixture of usage of "ng-click" and "ui-serf" in menu bar item causes the issue, I somehow used both ng-click to change router state and the view simultaneously, but the funny thing is when you change the router state, the binding will re-do and all the view binding will reset to initial state. This explains why when I click the link one more time, the color highlight becomes correct.
To fix this, I change the implementation method, I bind the $stateParams and $state to $rootScope as follows
$rootScope.$stateParams = $stateParams; $rootScope.$state = $state;
After assigning, I can access the current state directly in the view template and therefore save the effort on changing the state in ng-click
References
