离子 - [ui.router] 无法导航嵌套状态

Question

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

树视图如下所示：

- 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 开发工具检查这个网站，我可以看到生成了下一个链接：

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

但是视图没有被加载，并且没有显示错误。

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

参数定义存在一个问题，视图/目标命名存在第二个问题

我。 参数：['catId] 问题

在此处阅读有关 params: {} 对象的更多信息：

Angular ui router passing data between states without URL

上面使用的符号：

params: [ 'catId' ]

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

params : { cateId : null }

阅读更多here

二。查看命名

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

   .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': {
        ...

原因是，没有“@”的名称视图符号是真实的，可以表示为“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