ui-router and child page

问题

I am new to ui-router and struggling with a child page.

I have one ui-view which handles all page changes. I have one page called account which accepts a parameter called :accountNumber. The state is set up like this:

$stateProvider.state('account', {
    url: "/account/:accountNumber",
    templateUrl: 'app/account/account.tpl.html',
    controller: 'AccountController',
    controllerAs: 'controller',
    data: {
        requireLogin: true
    }
});

Now I want to create a page that sits under the URL /account/:accountNumber/stock but I can't get it to work properly. I added a state like this:

$stateProvider.state('account.stock', {
    url: "/stock",
    templateUrl: 'app/account/stock/stock.tpl.html',
    controller: 'StockController',
    controllerAs: 'controller',
    data: {
        requireLogin: true
    }
});

and changed my link to this:

<a class="tile box-shadow" ui-sref="account.stock" tile coloured-tile>
    <i class="fa fa-spinner"></i>
    <span class="title">Stock enquiry</span>
</a>

But when I click the button nothing loads, even though if I hover over the link it shows the correct URL.

so I tried this:

$stateProvider.state('stock', {
    url: "/account/:accountNumber/stock",
    templateUrl: 'app/account/stock/stock.tpl.html',
    controller: 'StockController',
    controllerAs: 'controller',
    data: {
        requireLogin: true
    }
});

but when I click my link, the address bar looks like this:

/account//stock

it is work noting that my link looks like this:

<a class="tile box-shadow" ui-sref="stock" tile coloured-tile>
    <i class="fa fa-spinner"></i>
    <span class="title">Stock enquiry</span>
</a>

Does anyone know of a solution?

回答1:

$stateProvider.state('account', {
    url: "/account/:accountNumber",
    templateUrl: 'app/account/account.tpl.html',
    controller: 'AccountController',
    controllerAs: 'controller',
    data: {
        requireLogin: true
    }
});

In your above state you have accontNumber as Url parameter.So while in it's child state you need that parameter to be mentioned.

So you need to pass account number when you need to load the account.stock state.

Your url should be like /account/101/stock. Let's say here 101 is your account number.

So on button click pass that parameter in json. like

ui-sref="account.stock({accountNumber: 101})"

Here in html template

<a class="tile box-shadow" ui-sref="account.stock({accountNumber: YOUR_SCOPE_VARIABLE_OR_STATIC_ACC_NO})" tile coloured-tile>
    <i class="fa fa-spinner"></i>
    <span class="title">Stock enquiry</span>
</a>

回答2:

As I told in comment, you are directly accessing child state, but parent state has accountNumber parameter, you need to pass it in your state call to form correct url like ui-sref="account.stock({'accountNumber': 1})"

Markup

<a class="tile box-shadow" ui-sref="account.stock({'accountNumber': 1})" tile coloured-tile>
    <i class="fa fa-spinner"></i>
    <span class="title">Stock enquiry</span>
</a>

来源：https://stackoverflow.com/questions/29364636/ui-router-and-child-page

标签

angularjs

angular-ui-router