问题描述
我正在使用 UI-Router,我需要在 url 更改的位置连接标签.例如,我有一个包含 3 个子链接的页面:
- 客户概览(templates/customer.overview.html):example.com/customer/:id/overview
- 客户设置(templates/customer.settings.html):example.com/customer/:id/settings
- 客户联系信息 (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
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 (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
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 路由器选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!