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:
- 客户概述(模板/ customer.overview.html):example.com/customer/:id/overview
- 客户设置(模板/ customer.settings.html):example.com/customer/:id/settings
- 客户联系信息(模板/ customer.contact.html):example.com/customer/:id/contact
- Customer Overview (templates/customer.overview.html): example.com/customer/:id/overview
- Customer Settings (templates/customer.settings.html): example.com/customer/:id/settings
- 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屋!