带有路由的 Ui 路由器选项卡 [英] Ui Router tabs with routing

问题描述

我正在使用 UI-Router，我需要在 url 更改的位置连接标签.例如，我有一个包含 3 个子链接的页面:

1. 客户概览(templates/customer.overview.html):example.com/customer/:id/overview
2. 客户设置(templates/customer.settings.html):example.com/customer/:id/settings
3. 客户联系信息 (templates/customer.contact.html):example.com/customer/:id/contact

所有这三个页面都应注入一个包含链接的主 customers.main.html 页面.

我的状态定义如下:

 $stateProvider.state('客户', {摘要:真实，网址:'/客户'，模板提供者:函数($templateCache){return $templateCache.get('templates/customer.overview.html');}}).state('customer.overview', {url:'/:id/概览',控制器: ''模板提供者:函数($templateCache){return $templateCache.get('templates/customer.settings.html');}}).state('customer.contact', {url:'/:id/联系人',控制器: ''模板提供者:函数($templateCache){return $templateCache.get('templates/customer.contact.html');}});

我有一个 customers.main.html 页面:

<a ng-repeat="tab in tabs" ui-sref='{{tab.route}}' ng-bind="tab.label">

TabsCtrl

angular.module('customers').controller('TabsCtrl', [功能() {var self = this;self.tabs = [{标签:'概述'，路线:'customer.overview'，活动:假},{标签:'设置'，路线:'customer.settings'，活动:假},{标签:'联系'，路线:'customer.contact'，活动:假}];self.selectedTab = self.tabs[0];}]);

但是，这似乎无法正常工作.当我单击时 ui-sref 指令总是解析为类似:/customers//settings.它没有选择 :id.

有什么帮助吗?

解决方案

那是因为您没有在 ui-sref 函数中传递 customerId 以便 ui-sref 将是 ui-sref="customer.overview(id: 1)" ，1 可以根据 customerId

动态变化>

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

Plunkr 示例 看看我是如何创建的 <contact

的代码>ui-sref

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?

解决方案

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

这篇关于带有路由的 Ui 路由器选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！