UI路由器卡口与路由 [英] Ui Router tabs with routing

问题描述

我使用的UI路由器，我需要挂钩标签所在的URL也会改变。因此，例如，我有一个页面3 sublinks：

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.html）：example.com/customer/:id/overview


2. 客户设置（模板/ customer.settings.html）：example.com/customer/:id/settings


3. 客户联系信息（模板/ customer.contact.html）：example.com/customer/:id/contact

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

这三个页面应注入，其中包括通一主 customers.main.html 页

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

我的状态被定义如下：

  $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 指令解析为类似： /客户//设置。这不是拿起：ID

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.

任何帮助吗？

推荐答案

这是因为你不及格客户ID 在 UI-SREF 功能，使 UI-SREF 将 UI-SREF =customer.overview（ID：1），1可以动态改变客户ID

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>

示例Plunkr 看看如何我创建 UI-SREF 为联系人

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