How to implement url for dynamic tabs in Angularjs

Question

I have displayed dynamic tab menu's using ng-repeat and i want to get individual url for each tab is it possible to get the url? if so how can i handle the route. i think its not possible to to set the route because of the dynamic tab content, is there any other options available?

@Ilan Frumer , this a sample plunker of my code link ,please go through it — nish
– nish, Commented Jan 9, 2014 at 6:21

Ilan Frumer · Accepted Answer · 2014-01-09 09:46:42Z

3

It's just a little patch, In a real application I recommend using ng-route OR ui-router.

Add url property to tabs

$scope.tabs = [
  { url: "/tab/1" , title:"Tab 1", content:"Dynamic content 1" },
  { url: "/tab/2" , title:"Tba 2", content:"Dynamic content 2" },
  { url: "/tab/3" , title:"Tab 3", content:"Dynamic content 3" },
  { url: "/tab/4" , title:"Tab 4", content:"Dynamic content 4" }
];

I Created A directive that:

changes the location based on active tab ( on $watch )
changes the active tab based on the location ( on prelink phase )

app.directive('tabRoute',function($location,$timeout){
  return {
    scope: {
      tabRoute : "="
    },
    compile: function(){
      return {
        pre: function(scope,elm,attrs){
          scope.tabRoute.active = ($location.path() === scope.tabRoute.url);
        },
        post: function(scope,elm,attrs){
          scope.$watch('tabRoute.active',function(){
            if(scope.tabRoute.active) {
              $location.path(scope.tabRoute.url)
            }
          })          
        }
      }     
    }
  }
})

finally, the markup

<tab ng-repeat="tab in tabs" 
     heading="{{tab.title}}" 
     active="tab.active" 
     disabled="tab.disabled" 
     tab-route="tab">

answered Jan 9, 2014 at 9:46

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nish Over a year ago

Thanks @Ilan Frumer it works now :) I dont know how to implement this with "ng-route OR ui-router" if any sample code is available please share the link

Gabriel Kohen Over a year ago

@Ilan, if you want to dynamically add/remove tabs in an MDI fashion, I don't think you could use UI-Router for this. I was trying to implemented using named ui-views but UI-Router was running into race conditions not always updating the newly added ui-view element in the new tab, Have you run into something similar?

Collectives™ on Stack Overflow

How to implement url for dynamic tabs in Angularjs

1 Answer 1

finally, the markup

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

finally, the markup

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related