Ui Router tabs with routing

Question

I'm using UI-Router and I need to hook up tabs where the url changes as well. So for example, I have a page with 3 sublinks:

Customer Overview (templates/customer.overview.html): example.com/customer/:id/overview
Customer Settings (templates/customer.settings.html): example.com/customer/:id/settings
Customer Contact Info (templates/customer.contact.html): example.com/customer/:id/contact

All three of these pages should be injected into one main customers.main.html page that includes the links.

My states are defined as follows:

  $stateProvider
    .state('customer', {
      abstract: true,
      url: '/customer',
      templateProvider: function($templateCache) {
        return $templateCache.get('templates/customer.overview.html');
      }
    })
    .state('customer.overview', {
      url:'/:id/overview',
      controller: ''
      templateProvider: function($templateCache) {
        return $templateCache.get('templates/customer.settings.html');
      }
    })
    .state('customer.contact', {
      url:'/:id/contact',
      controller: ''
      templateProvider: function($templateCache) {
        return $templateCache.get('templates/customer.contact.html');
      }
    });

And I have a customers.main.html page:

<div class="tabs" ng-controller="TabsCtrl as tabs">
   <a ng-repeat="tab in tabs" ui-sref='{{tab.route}}' ng-bind="tab.label">
</div>

TabsCtrl

angular.module('customers')
  .controller('TabsCtrl', [
    function() {

    var self = this;

    self.tabs = [
      {
        label: 'Overview',
        route: 'customer.overview',
        active: false
      },
      {
        label: 'Settings',
        route: 'customer.settings',
        active: false
      },
      {
        label: 'Contact',
        route: 'customer.contact',
        active: false
      }
    ];

    self.selectedTab = self.tabs[0];
  }
]);

However, this doesn't seem to be working correctly. The ui-sref directive when I click always resolves to something like: /customers//settings. It's not picking up the :id.

Any help?

did you try using the element inspector to check the href is correctly being rendered from the ui-sref in the browser? from the error and the double slash in the link, i think there is something funny going on with this — Mobaz
– Mobaz, Commented May 7, 2015 at 22:14
You are missing ,s after the controller declaration for your states. But @pankajparkar is correct in that you aren't passing an id to your states (he's missing {} in his answer's syntax). You can see the difference between your ui-sref and ones with params here. — Tony
– Tony, Commented May 7, 2015 at 22:48

Pankaj Parkar · Accepted Answer · 2015-05-09 09:30:51Z

1

That is because you are not passing customerId in your ui-sref function so that the ui-sref would be ui-sref="customer.overview(id: 1)" , 1 could dynamically change on basis of customerId

<div class="tabs" ng-controller="TabsCtrl as tabs">
   <a ng-repeat="tab in tabs" ui-sref="{{tab.route+'({ id:' + 1 + '})'}}" ng-bind="tab.label">
</div>

Example Plunkr take a look how I created ui-sref for contact

edited May 9, 2015 at 9:30

answered May 7, 2015 at 22:39

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

cusejuice Over a year ago

Thanks this is definitely the reason. However, I'm getting syntax errors when I try and use ui-sref="{{tab.route+'(id:' + 1 + ')'}}"

Pankaj Parkar Over a year ago

@cusejuice thats my bad ui-sref parameter should have wrap in curly brace {} like ui-sref="{{tab.route+'({ id:' + 1 + '})'}}"...also look at plunkr which I've attached

carton · Accepted Answer · 2015-05-07 22:16:54Z

0

I am not sure but try this ,i think you have to use $scope in your controller like this: $scope.tabs= [{.......},{.......},{......}]; // .....is your data And then you can use ui-sref="{{tab.route}}"

I had same probleme and i solved it with href="#/myUrl/{{idOfUser}}//overview" You can try this too but you have yo give idOfUser and use full path. I hope you understand what i mean .

answered May 7, 2015 at 22:16

carton

1,1689 silver badges17 bronze badges

Collectives™ on Stack Overflow

Ui Router tabs with routing

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related