ui-路由器和子页面

Question

我是 ui-router 的新手，正在努力处理子页面。

我有一个 ui-view 可以处理所有页面更改。我有一个名为 account 的页面，它接受一个名为 :accountNumber 的参数。状态是这样设置的：

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

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

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

并将我的 link 更改为：

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

但是当我点击按钮时没有任何加载，即使我将鼠标悬停在 link 上它显示正确的 URL。

所以我尝试了这个：

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

但是当我点击我的 link 时，地址栏看起来像这样：

/account//stock

注意到我的 link 看起来像这样：

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

有人知道解决方案吗？

Answer 1

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

在您的上述状态下，您的 accontNumber 为 Url parameter.So，而在其子状态下，您需要提及该参数。

所以需要加载account.stock状态时需要传入账号

你的 url 应该是 /account/101/stock。假设这里101是您的帐号。

所以在按钮点击时将参数传递给 json。喜欢

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

在 html 模板中

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

Answer 2

正如我在评论中所说，您正在直接访问子状态，但父状态有 accountNumber 参数，您需要在状态调用中传递它以形成正确的 url，如 [=13] =]

标记

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

ui-路由器和子页面

ui-router and child page

angularjs

angular-ui-router