CODEWITHSUNDEEP
angularjsangular-ui-router
cusejuice
cusejuice

Reputation: 10671

Ui Router tabs with routing

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:

  1. Customer Overview (templates/customer.overview.html): example.com/customer/:id/overview
  2. Customer Settings (templates/customer.settings.html): example.com/customer/:id/settings
  3. 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?

Upvotes: 0

Views: 1031

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

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

Upvotes: 1

carton
carton

Reputation: 1168

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 .

Upvotes: 0

Related Questions