angularjs - 在 Angular-UI 中获取状态的 "absolute"URL？

Question

我正在使用 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 的值.

Answer 1

您正在寻找的是内置 $state方法 href() .你可以看到一个 example here .文档:

href(stateOrName, params, options)

如何获取当前状态href？

$state.href($state.current.name);

让我们有这个扩展映射(参见 plunker 中的详细定义):

$stateProvider.
        state('tabs', {
            url: '/tab',
            abstract: true,...
        })
        .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,4}}',...
        });

状态调用的例子:

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