我正在使用Angular和Angular-UI
ui-router.我定义了一些状态：
app.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('tabs',{
url: "/tab",abstract: true,templateUrl: "views/tabs.html"
})
.state('tabs.home',{
url: "/home",views: {
'home-tab': {
templateUrl: "views/home.html"
}
}
});
请注意,我使用的是抽象状态.是否有一个方便的功能,通过名称获取给定状态的URL？例如,我想要类似的东西：
$state.get('tabs.home').absoluteUrl
它应该返回一个像#/ tab / home这样的值.
解决方法
你要搜索的是一个内置的$state方法href().你可以看到一个
example here.文档：
> href(stateOrName,params,options)
如何获得当前状态href？
$state.href($state.current.name);
让我们有这个扩展映射(参见plunker中的详细定义)：
$stateProvider.
state('tabs',{
url: '/tab',...
})
.state('tabs.home',{
url: '/home',...
})
.state('tabs.home.detail',{
url: '/{id:[0-9]{1,4}}',...
})
.state('tabs.home.detail.edit',{
url: '^/edit/{id:[0-9]{1,...
});
状态调用的示例：
ui-sref
<ul>
<li><a ui-sref="tabs.home">Tabs/Home</a></li>
<li><a ui-sref="tabs.home.detail({id:4})">Tabs/Home id 4</a></li>
<li><a ui-sref="tabs.home.detail({id:5})">Tabs/Home id 5</a></li>
<li><a ui-sref="tabs.home.detail.edit({id:4})">Tabs/Home id 4 - edit</a></li>
<li><a ui-sref="tabs.home.detail.edit({id:5})">Tabs/Home id 5 - edit</a></li>
</ul>
href
<ul>
<li><a href="#/tab/home">Tabs/Home</a></li>
<li><a href="#/tab/home/4">Tabs/Home id 4</a></li>
<li><a href="#/tab/home/5">Tabs/Home id 5</a></li>
<li><a href="#/edit/4">Tabs/Home id 4 - edit</a></li>
<li><a href="#/edit/5">Tabs/Home id 5 - edit</a></li>
</ul>
在每个人中我们都可以打电话
var href =$state.href($state.current.name);
这将导致
#/tab/home #/tab/home/4 #/tab/home/5 #/edit/5 -- this state resets the url form the root #/edit/5 -- see the (^) at the start of the url definition
