angular.js - 有一个ui-router的界面逻辑想请教大家，看看有没有比较官方的解决方案

问题描述

问 题

我的项目中，现在有一个问题：

<ion-tab title="首页" icon="ion-home" ui-sref="tabs.home" badge="badgenum" badge-style="badge-assertive">
    <ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>

<ion-tab title="任务通知" icon="ion-chatbox-working" ui-sref="tabs.notice">
    <ion-nav-view name="notice-tab"></ion-nav-view>
  </ion-tab>

以上是我项目的tabs栏，其中，在home-tab和notice-tab中，有共用的ui-router的页面，此时我的解决办法是在templates文件夹中写通用的界面

    .state('tabs.shenheSG', {
      url: '/shenheSG/:detailObj',
      cache: true,
      views: {
        'home-tab': {
          templateUrl: 'templates/tab-shenheSG.html',
          controller: 'ShenheSGCtrl'
        }
      }
    })
    .state('tabs.MshenheSG', {
      url: '/MshenheSG/:detailObj',
      cache: true,
      views: {
        'notice-tab': {
          templateUrl: 'templates/tab-shenheSG.html',
          controller: 'ShenheSGCtrl'
        }
      }
    })

这样就能从home-tab和notice-tab界面中进入tab-shenheSG.html 这个通用的界面。
但是，问题来了在tab-shenheSG.html页面中，还会有一个三级界面tab-projectlog.html这个三级界面，我目前写的是路由是

.state('tabs.projectlog', {
          url: '/projectlog/:detailObj',
          cache: true,
          views: {
            'home-tab': {
              templateUrl: '../templates/tab-projectlog.html',
              controller: 'ProjectlogCtrl'
            }
          }
        })

注意这里的views:{'home-tab'}，所以如果我在任务通知notice-tab进入到tab-shenheSG.html界面，此时在点击进入到tab-projectlog.html,ui-router是没办法识别的，进入页面后将没有返回按钮，此时APP就不能正常走流程。
不知道我的问题描述清楚没有，请问这种办法如何解决？
我此时有一个想法，就是在写一个路由，是

views:{
    'notice-tab':{
        templateUrl:'../templates/tab-projectlog.html',
        controller: 'ProjectlogCtrl'
    }
}

然后在点击进入tab-projectlog.html前，根据$ionicHistory判断是由home-tab进入的还是notice-tab进入的，然后选择跳转不同父级路由的tab-projectlog.html

解决方案

不知道我理解的对不对。。根据目前例子，你的页面由两部分组成，home-tab 和 notice-tab。
根据你的描述，tabs.shenheSG 与 tabs.MshenheSG 对应的模板一样，都是 templates/tab-shenheSG.html。它们分别都有一个相同的 子路由 叫 tabs.projectlog。

有一些我认为前后矛盾的地方，先跟你确认下：

1. tabs.shenheSG 与 tabs.MshenheSG 的 template 和 controller 相同，区别只是在 url 和 view。为什么不在同一个 state 以及同一个 url 下用 multiple view 来处理？
2. 如果项目逻辑中，你认为分开 tabs.shenheSG 与 tabs.MshenheSG 的 URL 是必要的，你当然可以写成不同 URL。只是，我想不到什么场景下，两个不同的 state，不同的 URL 以及不同的 view 需要使用同一个 template。或许是因为你的 template 融合了太多种情况，分的不够细
3. 既然你想用 子路由，那么这个子路由应该绑定给 tabs.shenheSG.projectlog 以及 tabs.MshenheSG.projectlog。现在你这样写不是父子关系，而是平级的

简单归纳一下，你现在的情况是这样：

|-- tabs
|   |-- MshenheSG (/MshenheSG/:detailObj)    --> home-tab: 'templates/tab-shenheSG.html'
|   |-- shenheSG (/shenheSG/:detailObj)      --> notice-tab: 'templates/tab-shenheSG.html'
|   |-- projectlog (/projectlog/:detailObj)  --> home-tab: '../templates/tab-projectlog.html'

我可能会改成这样：

|-- tabs
|   |-- MshenheSG (/MshenheSG/:detailObj)    --> home-tab: 'templates/tab-shenheSG.html'
|   |   |-- projectlog (/projectlog)         --> home-tab: '../templates/tab-projectlog.html'
|   |-- shenheSG (/shenheSG/:detailObj)      --> notice-tab: 'templates/tab-shenheSG.html'
|   |   |-- projectlog (/projectlog)         --> home-tab: '../templates/tab-projectlog.html'

这样，MshenheSG/xxx/projectlog 就是从 MshenheSG 来的，state 为 tabs.MshenheSG.projectlog，shenheSG/xxx/projectlog 就是从 shenheSG 来的，state 为 tabs.shenheSG.projectlog

类似于这么写：

.state('tabs', {
    url: '/base'
})
.state('tabs.a', {
    url: '/a'
})
.state('tabs.b', {
    url: '/b'
})
.state('tabs.a.child', {
    url: '/child'
})
.state('tabs.b.child', {
    url: '/child'
})

这样你可以通过 /base/a/child 访问 a 的 child。
注意，定义子路由的时候，父级的 url 会被继承下来，除非你用 ^ 定义 url。详情看文档：https://github.com/angular-ui...

这篇关于angular.js - 有一个ui-router的界面逻辑想请教大家，看看有没有比较官方的解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！