ui-router 和子页面 [英] ui-router and child page

问题描述

我是 ui-router 的新手，正在为子页面苦苦挣扎.

我有一个处理所有页面更改的 ui-view.我有一个名为 account 的页面，它接受一个名为 :accountNumber 的参数.状态设置如下:

$stateProvider.state('账户', {url: "/account/:accountNumber",templateUrl: 'app/account/account.tpl.html',控制器:'账户控制器'，controllerAs: '控制器',数据: {要求登录:true}});

现在我想创建一个位于 URL /account/:accountNumber/stock 下的页面，但我无法让它正常工作.我添加了这样的状态:

$stateProvider.state('account.stock', {网址:/股票"，templateUrl: 'app/account/stock/stock.tpl.html',控制器:'股票控制器'，controllerAs: '控制器',数据: {要求登录:true}});

并将我的链接更改为:

<i class="fa fa-spinner"></i><span class="title">股票查询</span></a>

但是当我点击按钮时什么也没有加载，即使我将鼠标悬停在链接上，它也会显示正确的 URL.

所以我试过这个:

$stateProvider.state('stock', {url: "/account/:accountNumber/stock",templateUrl: 'app/account/stock/stock.tpl.html',控制器:'股票控制器'，controllerAs: '控制器',数据: {要求登录:true}});

但是当我点击我的链接时，地址栏看起来像这样:

<块引用><块引用>

/account//股票

注意到我的链接是这样的:

<i class="fa fa-spinner"></i><span class="title">股票查询</span></a>

有人知道解决方案吗?

解决方案

$stateProvider.state('account', {url: "/account/:accountNumber",templateUrl: 'app/account/account.tpl.html',控制器:'账户控制器'，controllerAs: '控制器',数据: {要求登录:true}});

在上述状态中，您将 accontNumber 作为 Url 参数.因此，在子状态中，您需要提及该参数.

所以当你需要加载account.stock状态时，你需要传递帐号.

您的网址应该类似于 /account/101/stock.假设这里的 101 是您的帐号.

所以点击按钮在json中传递该参数.喜欢

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

在 html 模板中

<i class="fa fa-spinner"></i><span class="title">股票查询</span></a>

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?

解决方案

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

这篇关于ui-router 和子页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！