angularjs - ionic - [ui.router] 无法导航嵌套状态

Question

我一直在努力使这项工作，我想我错过了一些东西，但我不知道是什么。我试过绝对路径和同样的问题。也许是我试图将各州联系起来的方式？

TreeView 是这样的:

- app
  - app.category
    - app.category.category-detail

我可以从 app 导航, 至 app.category但我不能再进一步了，这是我的路线:

        .state('app.category', {
            url: "/category?catId",
            views: {
                'menuContent': {
                    templateUrl: "templates/category.html",
                    controller: "CategoryCtrl",
                    params: ['catId ']

                }

            }
        })
        .state('app.category.category-detail', {
            url: "/category-detail",
            views: {
                'menuContent': {
                    templateUrl: "templates/category-detail.html",
                    controller: "DirectoryDetailCtrl",
                    params: [ 'catId' ]
                }
            }
        })

这是我的 category.html

<ion-view>

    <ion-nav-bar class="bar-dark nav-title-slide-ios7 bg-nav" ng-controller="NavCtrl">
        <ion-nav-back-button class="button-clear" ng-click="myGoBack()">
            <i class="ion-chevron-left blanco negrita"></i>
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-content class="directory-content padding-3 bg-gris">
        <ion-list>
            <ion-item ng-repeat="category in categories" class="item-thumbnail-left tarjeta">
            <a ui-sref="app.category.category-detail">
                {{category.categoryName}}
            </a>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

现在，如果我使用 Chrome Dev Tools 检查这个网站，我可以看到生成了下一个链接:

    <a ui-sref="app.category.category-detail" href="#/app/category/category-detail?catId=1" class="">
         Category 1
    </a>

但是 View 没有被加载，也没有显示错误。

category-detail.html

<ion-view>
    <ion-nav-bar class="bar-dark nav-title-slide-ios7 bg-nav" ng-controller="NavCtrl">
        <ion-nav-back-button class="button-clear" ng-click="myGoBack()">
            <i class="ion-chevron-left blanco negrita"></i>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-content class="category-content padding-3 bg-gris">
        <h1>CATEGORY</h1>
    </ion-content>
</ion-view>

Answer 1

参数定义有一个问题，第二个是 View /目标命名问题

一、参数:['catId] 问题

阅读更多关于 params: {} 对象例如这里:

Angular ui router passing data between states without URL

上面使用的符号:

params: [ 'catId' ]

不再有效......现在我们有更多的设置，例如默认值:

params : { cateId : null }

阅读更多 here

二、 View 命名

看来，您正试图针对相同的 ui-view="menuContent" 来自 'app.category'及其子状态 'app.category.category-detail' ...两者都有相对命名:

   .state('app.category', {
        url: "/category?catId",
        views: {
            'menuContent': { // no @ = relative name
             ...

    .state('app.category.category-detail', {
        url: "/category-detail",
        views: {
            'menuContent': {
            ...

万一，这个目标 ui-view="menuContent" 在'app'状态下定义，我们必须使用绝对命名

.state('app.category.category-detail', {
    url: "/category-detail",
    views: {
        'menuContent@app': {
        ...

原因是，没有“@”的名称 View 符号是真实的，可以表示为“viewName@parentState”。所以这些是一样的

.state('app.category', {
    url: "/category?catId",
    views: {
        // relative
        'menuContent': {
        // absolute - targeting the same ui-view
        'menuContent@app': { // this is absolute name

尝试在此处获得更多信息(不是关于 ionic，但后面的 UI-Router 内容是相同的):

Angularjs ui-router not reaching child controller

Angular UI Router - Nested States with multiple layouts