UI路由器卡口与路由

本文介绍了UI路由器卡口与路由的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用的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:

客户概述（模板/ customer.overview.html）：example/customer/:id/overview

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

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

Customer Overview (templates/customer.overview.html): example/customer/:id/overview

Customer Settings (templates/customer.settings.html): example/customer/:id/settings

Customer Contact Info (templates/customer.contact.html): example/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 为联系人