Angular navigate to a specific tab on a page

Question

I would like to navigate to a page of my single page application using a link like /#/invoices/1?tab=2. This page contains tabs, so I would also like to send the user directly to the tab I wish through the url.

Could you provide some pointers on how to implement this in the cleanest way?

Answer 1

Use $anchorScroll method, passing a class name on it you can go directly to that element.

Answer 2

Just an update to above answer.

Few examples with custom directives

http://nadeemkhedr.com/angularjs-scroll-to-element-using-directives/

 angular.module('MyApp').directive('scrollToBookmark', function() {  
  return {
    link: function(scope, element, attrs) {
      var value = attrs.scrollToBookmark;
      element.click(function() {
        scope.$apply(function() {
          var selector = "[scroll-bookmark='"+ value +"']";
          var element = $(selector);
          if(element.length) {
            window.scrollTo(0, element[0].offsetTop – 100); 
            // Don’t want the top to be the exact element, -100 will go to the top for a little bit more
          }
        });
      });
    }
  };
});