UI的路由器和子页 [英] ui-router and child page

问题描述

我是新来的UI路由器和一个子页面中挣扎。

我有一个用户界面视图负责处理所有页面的变化。
我呼吁一个页面的帐户，它接受一个名为参数：使用accountNumber 。国家建立这样的：

  $ stateProvider.state（'账户'，{
    网址：/帐号/：使用accountNumber
    templateUrl：应用程序/帐号/ account.tpl.html'，
    控制器：'的AccountController，
    controllerAs：控制器，
    数据：{
        requireLogin：真
    }
}）;
 

现在我想创建该URL下坐着一个页面的 /帐号/：使用accountNumber /股，但我不能让它正常工作。
我说这样的状态：

  $ stateProvider.state（'account.stock'，{
    网址：/股，
    templateUrl：应用程序/帐号/股票/ stock.tpl.html'，
    控制器：'StockController'，
    controllerAs：控制器，
    数据：{
        requireLogin：真
    }
}）;
 

和改变了我的链接，这样的：

 ＆LT;一类=瓷砖的box-shadowUI-SREF =account.stock瓦彩色瓷砖＆GT;
    ＆LT; I类=发发微调＆GT;＆LT; I＆GT /;
    ＆LT;跨度类=标题＆GT;库存查询＆LT; / SPAN＆GT;
＆所述; / A＆GT;
 

但是，当我按一下按钮没有任何负载，即使如果我将鼠标悬停在链接它显示正确的URL。

所以我尝试这样的：

  $ stateProvider.state（'股票'，{
    网址：/帐号/：使用accountNumber /股，
    templateUrl：应用程序/帐号/股票/ stock.tpl.html'，
    控制器：'StockController'，
    controllerAs：控制器，
    数据：{
        requireLogin：真
    }
}）;
 

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

  

    

/帐户//股票

  

据工作指出的是，我的链接看起来像这样：

 ＆LT;一类=瓷砖的box-shadowUI-SREF =股票瓦彩色瓷砖＆GT;
    ＆LT; I类=发发微调＆GT;＆LT; I＆GT /;
    ＆LT;跨度类=标题＆GT;库存查询＆LT; / SPAN＆GT;
＆所述; / A＆GT;
 

有谁知道一个解决方案吗？

解决方案

  $ stateProvider.state（'账户'，{
    网址：/帐号/：使用accountNumber
    templateUrl：应用程序/帐号/ account.tpl.html'，
    控制器：'的AccountController，
    controllerAs：控制器，
    数据：{
        requireLogin：真
    }
}）;
 

在你上面的状态你有accontNumber作为网址parameter.So，而在您需要的孩子状态被提及的参数。

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

您的网址应该是这样的 /帐号/ 101 /股票。让我们在这里说101是你的帐号。

于是就按一下按钮传递的JSON参数。像

  UI-SREF =account.stock（{了accountNumber：101}）
 

在HTML模板这里

 ＆LT;一类=瓷砖的box-shadowUI-SREF =account.stock（{了accountNumber：YOUR_SCOPE_VARIABLE_OR_STATIC_ACC_NO}）瓦彩色瓷砖＆GT;
    ＆LT; I类=发发微调＆GT;＆LT; I＆GT /;
    ＆LT;跨度类=标题＆GT;库存查询＆LT; / SPAN＆GT;
＆所述; / A＆GT;
 

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的路由器和子页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！