ui-router的子状态未解决

I'm still working on an angular app, using the great ui-router. I'd like to use some dynamic nested states (I talked about it here), so I know it's possible.

我还在使用一个有角度的应用程序,使用伟大的ui-router。我想使用一些动态嵌套状态(我在这里谈到它),所以我知道它是可能的。

Here is my code, with a specific state and its dynamic children states :

这是我的代码,具有特定的状态及其动态子状态:

    .state('home', {

       url: '/home',
       controller: 'RouteCtrl'
    })

    .state('home.state', {

       url: '/home/:state',
       controller: 'RouteCtrl'
     })

     $urlRouterProvider.otherwise('/home')

I have 3 buttons (more specifically, I use <a> to make it) to access 3 differents states : 'home', 'contact' and 'about'. 'contact' and 'about' are 'home' nested states and every state has a specific text to display when activated.

我有3个按钮(更具体地说,我使用来创建它)来访问3个不同的状态:'home','contact'和'about'。 'contact'和'about'是'home'嵌套状态,每个州都有一个特定的文本在激活时显示。

Unfortunatly, it appears that both of the children states aren't resolved from 'home' state.

不幸的是,似乎两个儿童国家都没有从“家庭”州解决。

Here is a plunker of the problem which match with my problem. Any idea ?

这是问题的一个问题,与我的问题相符。任何的想法 ?

3 个解决方案

#1

Technically home, contact and about are not 3 states. What you appear to be doing is altering the content based of the parameters of the state. This could be achieved using one state and forcing ui-router to reload the state when you use $state.go

从技术上讲,家庭,联系和约不是3个州。您似乎正在做的是根据州的参数更改内容。这可以使用一个状态来实现,并在使用$ state.go时强制ui-router重新加载状态

I have modified your plunkr here http://plnkr.co/edit/XXaltjG17FwY15tSbKaD?p=preview

我在这里修改了你的plunkr http://plnkr.co/edit/XXaltjG17FwY15tSbKaD?p=preview

Your state definition could look something like this,

您的州定义可能看起来像这样,

.state('home', {      
  url: '/home?state',
  controller: 'RouteCtrl'
})

The question mark makes the state parameter optional and also a query string.

问号使state参数可选,也是查询字符串。

The redirection could look something like this. You need to reload as you are going to the same route

重定向可能看起来像这样。你需要重新加载,因为你要走同一条路线

$state.go('home', {state: state}, {reload: true});

Redirecting to the home page could look something like this. You need to disable inheritance for this redirect as you don't want to keep the query strings.

重定向到主页可能看起来像这样。您需要为此重定向禁用继承,因为您不想保留查询字符串。

$state.go('home',{}, {reload: true, inherit: false});

#2

This will give you a working call to the new states:

这将为您提供新状态的工作电话:

$scope.redirect = function(state) {
    console.log('redirect to state : ' + state);

    if (state != 'home') {
      $state.go('home.state', {
        'state': state
      });
    } else {
      $state.go('home');
    }
  }

However, it still won't change the text on the page, because the controller only sets it once when initially loaded.

但是,它仍然不会更改页面上的文本,因为控制器仅在初始加载时设置一次。

#3

The main problem here is that you want to have a variable in the state. You can't go to state home.about since it's not a given .state.

这里的主要问题是你想在状态中有一个变量。你不能去home.about,因为它不是一个给定的.state。

You should look at stateParams, or you can specify the URL where you want to go to the URL with Angular's $location.

您应该查看stateParams,或者您可以使用Angular的$ location指定要转到URL的URL。

Note: I think the url for a child state like home.state does not need the /home URL since it's in the father's state.

注意:我认为像home.state这样的子状态的url不需要/ home URL,因为它处于父亲的状态。

#1