angularjs – 获取Angular-UI中状态的“绝对”URL？

发布时间：2020-12-17 17:48:16 所属栏目：安全来源：网络整理

导读：我正在使用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: "/hom

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!