0

Using 'ngRoute', There are 3 different links on the page, each directs to its own ng-view using different controllers, when clicked on a specific link, a function runs which strips off 'active' class from all the links and put 'active' class on the cliced link.

THE PROBLEM: after i choose a specific link, it gets highlighted because of the 'active' class. BUT when I REFRESH the page, everything goes fine, I'm still on the ng-view i need BUT.. the 'activated link' is no longer highlighted, and the default link is.

bookApp.controller('mainController', function($rootScope, $scope, $route) {
  $scope.setActive = function(event) {
    var links = document.querySelectorAll('.menu ul li a');        
    for (var i = 0; i < links.length; i++ ) {
        links[i].className = '';
    }
    angular.element(event.target).parent().addClass('active');
  };
};
Ronnie
  • 11,138
  • 21
  • 78
  • 140
DragonBoy101
  • 1
  • 2
  • Have you tried placing the active class on the element based on the route instead of the doing it dynamically when you click on the link? In other words the controller reads the route and sets the className accordingly. – robbymurphy Oct 16 '17 at 23:31
  • Hi, thank you for the quick reply, Could you please give me a code example im pretty new. – DragonBoy101 Oct 16 '17 at 23:47
  • It is because you are highlighting the link in your setActive function. I assume that function only gets called when clicked. As @robbymurphy stated, set your class based off of `$route`. Start by simply `console.log($route)` to see if there is something there to help you – Ronnie Oct 16 '17 at 23:54
  • I have no idea how to do it, could you please send me a hint or external resourses? – DragonBoy101 Oct 16 '17 at 23:56
  • You can start here: https://docs.angularjs.org/api/ngRoute/service/$route#examples instead of putting your code in a click function try the `$routeChange` events – Ronnie Oct 17 '17 at 00:03
  • I'll give it a try, first time im debugging! ;D – DragonBoy101 Oct 17 '17 at 00:07
  • Also, give this thread a peek https://stackoverflow.com/questions/16344223/angularjs-cancel-route-change-event – Ronnie Oct 17 '17 at 00:09
  • I give up, could you please give me the solution? – DragonBoy101 Oct 17 '17 at 00:38
  • I've heard, i can use SessionStorage, any thoughts? – DragonBoy101 Oct 17 '17 at 21:11
  • In my case, there is js which is filled with JQuery functions. And I used `$(window).on('hashchange')` because url of mine has regular pattern can be separated by first hash like `/user_id/profile`, `/user_id/blogs`, `/user_id/photos` and etc. So I caught this point and used this to activate tabs. There are several ways to solve this and I think this is not bad way when we are using proper url pattern. – Canet Robern Oct 25 '17 at 06:05

0 Answers0