ui-router and child page

Question

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?

do you have a ui-view inside of app/account/account.tpl.html so that child views can show themselves? — bahadir
– bahadir, Commented Mar 31, 2015 at 9:09

Satyam Koyani · Accepted Answer · 2015-03-31 09:11:05Z

$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>

Pankaj Parkar · Accepted Answer · 2015-03-31 09:36:27Z

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>

Collectives™ on Stack Overflow

ui-router and child page

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related