angularjs – Ionic – [ui.router]无法导航嵌套状态

发布时间：2020-12-17 17:14:47 所属栏目：安全来源：网络整理

导读：我一直在尝试做这项工作,我想我错过了什么,但我不知道是什么.我试过绝对路径和同样的问题.也许是我试图联系各州的方式？树视图如下： - app - app.category - app.category.category-detail 我可以从应用程序导航到app.category,但我不能再进一步了,这是我

我一直在尝试做这项工作,我想我错过了什么,但我不知道是什么.我试过绝对路径和同样的问题.也许是我试图联系各州的方式？

树视图如下：

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

我可以从应用程序导航到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>

但视图未加载,并且未显示错误.

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

解决方法

params定义有一个问题,第二个有view / target命名

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’中定位相同的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

尝试在这里获得更多(不是关于离子,但UI-Router背后的东西是相同的)：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!