离子- [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

params定义有一个问题，第二个问题是视图/目标命名。

I. params：'catId问题

例如，在这里阅读有关params: {}对象的更多信息：

Angular ui router passing data between states without URL

上文所用的符号：

params: [ 'catId' ]

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

params : { cateId : null }

阅读更多here

II. .视图命名

似乎，您还试图针对来自'app.category'及其子状态'app.category.category-detail'的相同的'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': {
        ...

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

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

尝试在这里得到更多(不是关于离子的，但UI-路由器背后的东西是一样的)

• Angularjs ui-router not reaching child controller
• Angular UI Router - Nested States with multiple layouts