Ui 带有路由的路由器选项卡

Question

我正在使用 UI-Router，我需要在 url 发生变化的地方连接选项卡。例如，我有一个包含 3 个子链接的页面：

客户概览 (templates/customer.overview.html)：示例。com/customer/:id/overview
客户设置 (templates/customer.settings.html)：示例。com/customer/:id/settings
客户联系信息 (templates/customer.contact.html)：示例。com/customer/:id/contact

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

我的状态定义如下：

  $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');
      }
    });

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

<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];
  }
]);

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

有什么帮助吗？

Answer 1

我不确定，但试试这个，我认为你必须像这样在你的控制器中使用 $scope ： $scope.tabs= [{.......},{.......},{......}]; // .....是你的数据然后你可以使用 ui-sref="{{tab.route}}"

我有同样的问题，我用 href="#/myUrl/{{idOfUser}}//overview 解决了它您也可以尝试此操作，但您必须提供 idOfUser 并使用完整路径。我希望你明白我的意思。

Answer 2

那是因为你没有在你的 ui-sref 函数中传递 customerId 所以 ui-sref 将是 ui-sref="customer.overview(id: 1)" ，1 可以根据 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 看看我是如何为 contact

创建 ui-sref 的

Ui 带有路由的路由器选项卡

Ui Router tabs with routing

angularjs

angular-ui-router