Angularjs UI-Router状态参数不起作用

时间:2022-05-25 12:03:38

I have a simple setup in my config()

我的配置中有一个简单的设置()

    $stateProvider
        .state('app', {
          'url': '/app',
          'abstract': true,
          'templateUrl': 'views/layout/index.html',
          'controller': 'App'
        })

        .state('app.home', {
          'url': '/home',
          'views': {
            'appContent': {
              'templateUrl': 'views/home/index.html',
              'controller': 'Home'
            }
          }
        });
        .state('app.asd', {
          'url': '/asd/:idContact?',
          'views': {
            'appContent': {
              'templateUrl': 'views/asd/index.html',
              'controller': 'Asd'
            }
          }
        });
$urlRouterProvider.otherwise('/app/home');

If i browse app/asd/7 everything works if i browse then app/asd it redirects me

如果我浏览app / asd / 7一切正常,如果我浏览app / asd它重定向我

I am wondering how can i make idContact param not required ? I used the classic $routeProvider sintax for it :(

我想知道如何才能使idContact param不是必需的?我使用经典的$ routeProvider sintax :(

2 个解决方案

#1


1  

Try:

/asd/{idContact:/?.*}

As far as I know that is the workaround to make parameters optional in ui router. I'm not sure if there have been any recent built in implementations of this in ui router.

据我所知,这是在ui路由器中使参数可选的解决方法。我不确定ui路由器中是否有最新的内置实现。

#2


1  

Just wanted to provide some example giving the answer to optional parameter issue. See that all in working example.

只想提供一些示例,给出可选参数问题的答案。在工作示例中查看所有内容。

This Q&A does explain more details:

此问答确实解释了更多细节:

Here is a snippet of two states definition:

以下是两个州定义的片段:

.state('view', {
    url: '/view/:inboxId',
    templateUrl: 'tpl.view.html',
    controller: 'viewCtrl'
}).

state('view_root', {
    url: '/view',
    templateUrl: 'tpl.view.html',
    controller: 'viewCtrl'
})

And here are some ways how to create links (href or ui-sref) to reach these states:

以下是一些如何创建链接(href或ui-sref)以达到这些状态的方法:

// href
<a href="#/view/1">/view/1</a> - id is passed<br />
<a href="#/view/"> /view/ </a> - is is missing - OPTIONAL like <br />
<a href="#/view">  /view  </a> - url matching the view_root

// ui-sref
<a ui-sref="view({inboxId:2})">    - id is passed<br /> 
<a ui-sref="view">                 - is is missing - OPTIONAL like
<a ui-sref="view({inboxId:null})"> - id is explicit NULL <br />
<a ui-sref="view_root()">          - url matching the view_root

That should show, that we do not have to pass some param, just must be sure that the proper url is called (the trailing /)

这应该表明,我们不必传递一些参数,只需要确保调用正确的URL(尾随/)

#1


1  

Try:

/asd/{idContact:/?.*}

As far as I know that is the workaround to make parameters optional in ui router. I'm not sure if there have been any recent built in implementations of this in ui router.

据我所知,这是在ui路由器中使参数可选的解决方法。我不确定ui路由器中是否有最新的内置实现。

#2


1  

Just wanted to provide some example giving the answer to optional parameter issue. See that all in working example.

只想提供一些示例,给出可选参数问题的答案。在工作示例中查看所有内容。

This Q&A does explain more details:

此问答确实解释了更多细节:

Here is a snippet of two states definition:

以下是两个州定义的片段:

.state('view', {
    url: '/view/:inboxId',
    templateUrl: 'tpl.view.html',
    controller: 'viewCtrl'
}).

state('view_root', {
    url: '/view',
    templateUrl: 'tpl.view.html',
    controller: 'viewCtrl'
})

And here are some ways how to create links (href or ui-sref) to reach these states:

以下是一些如何创建链接(href或ui-sref)以达到这些状态的方法:

// href
<a href="#/view/1">/view/1</a> - id is passed<br />
<a href="#/view/"> /view/ </a> - is is missing - OPTIONAL like <br />
<a href="#/view">  /view  </a> - url matching the view_root

// ui-sref
<a ui-sref="view({inboxId:2})">    - id is passed<br /> 
<a ui-sref="view">                 - is is missing - OPTIONAL like
<a ui-sref="view({inboxId:null})"> - id is explicit NULL <br />
<a ui-sref="view_root()">          - url matching the view_root

That should show, that we do not have to pass some param, just must be sure that the proper url is called (the trailing /)

这应该表明,我们不必传递一些参数,只需要确保调用正确的URL(尾随/)