侧边菜单离子的主细节

Question

我正在尝试通过侧边菜单了解 ionic 中的主细节 (MD) 模式。示例代码将 'Playlists' 作为主代码，将 'Playlist' 作为细节。这些州看起来像这样：

    .config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app.playlists', {
      url: '/playlists',
      views: {
        'menuContent': {
          templateUrl: 'templates/playlists.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })

  .state('app.single', {
    url: '/playlists/:playlistId',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  });
  $urlRouterProvider.otherwise('/app/playlists');
});

但首先，我不明白为什么播放列表状态被称为'app.single'。我在代码的其他任何地方都没有看到 'single' 这个词。如果我想在第 1 页有一个主细节模式，在第 2 页有另一个不同的主细节模式（通过菜单选择）怎么办？我如何称呼那里的详细状态？

然后我的另一个问题是相关的，我似乎无法让我自己的 MD 模式工作。这些是重要的代码：

app.js:

  .state('app.master', {
    url: '/master',
    templateUrl: 'templates/master.html',
        controller: 'MasterCtrl'
  })

  .state('app.detail', {
    url: '/master/:id',
    templateUrl: 'templates/detail.html',
    controller: 'DetailCtrl'
  })

master.html:

<ion-view title="Master">
    <ion-content>
        <ion-list>
            <ion-item class="item" ng-repeat="person in people">
                <a href="#/app/master/{{person.id}}">{{person.text}}</a>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

menu.html:

....
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
        <ion-item menu-close href="#/app/master">
          Master
        </ion-item>
....

Playlists MD 一直有效，但我自己的MD 不行。我确实得到了包含项目的主列表（控制器和服务工作正常），但是当我单击列表中的项目时，没有任何反应。然后，当我向后滑动时（这应该会打开侧边菜单），详细信息页面 'sort of' 显示时没有 css 或数据。所以某处出现了故障。我只是似乎不理解整个 state/url 事情，虽然我阅读了足够多的文档..

Answer 1

我猜，你是 Ionic 新手，对 AngularJS 和 Angular UI 路由器一无所知。

首先，state中的点符号是用来标记一些将从一个指定的父视图继承的子视图。当你在 www/js/app.js 中阅读时，你会看到一个状态 .state('app')，并且这个是父视图，menu.html，子视图将在此标记中替换，或所谓的 Angular 指令，

<ion-nav-view name="menuContent"></ion-nav-view>

子视图或详细视图需要指定两件事，

首先，父名称，点之前的单词，如侧边菜单示例，app.[child_name]
其次，子view要指定父view适合的部分，通过views属性，如上例，

你看到这个 menuContent,

views: {
    'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
    }
}

我们来谈谈Master-Detail Pattern，它只是一个关于如何显示项目列表以及从列表中访问单个项目的能力的概念。

sidemenu 是一个 复杂的 示例，适合初学者。

简单的例子是只有两个页面没有任何关系（没有侧边菜单，没有标签...）。

 .state('cats', {
    url: '/cats',
    templateUrl: 'templates/catlist.html',
    controller: 'CatListCtrl'
  })

 .state('cat', {
   url: '/cats/:catId',
   templateUrl: 'templates/catsingle.html',
   controller: 'CatSingleCtrl'

 })

关于templates/catlist.html

<ion-view view-title="Cat Collection">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="cat in cats" href="#/cats/{{cat.id}}">
        {{cat.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

和templates/catsingle.html

<ion-view view-title="Cat">
  <ion-content>
    <h1>{{cat.name}}</h1>
    <p>{{cat.description}}</p>
  </ion-content>
</ion-view>

从列表中访问单个项目的要点是指定到资源的方向，在这种情况下，方向是通过 URL, #/cats/{{ cat.id}}。所以如果猫有 id = 5 那么 URL 将是 #/cats/5; ok cool，让我们访问显示ID为5的猫信息的单个页面。这就是你在现实中的解释。

我对学习 Ionic 的建议，

首先，了解基本的AngularJS，https://angularjs.org/
二、联系AngularUI路由器导航系统，http://angular-ui.github.io/ui-router/
第三，练习使用非常非常小的 Ionic 应用程序进行创建，制作一个 复杂的 Hello Ionic。

猜猜我的答案就是你要找的。

The Playlists MD works all the way, but my own MD doesn't. I do get the Master list with items (controller and services work fine), but when I click an item in the list, nothing happens. Then when I swipe back (this should open the sidemenu), the detail page 'sort of' shows up without css or data. So somewhere there's a glitch. I just don't seem to understand the whole state/url thing, while I read enough documentation..

我看得出来你阅读了，但是你问问自己你是否知道它所需要的东西？

在Ionic framework的首页上，我可以看到AngularJS，我可以看到ngCordova，我还看到 SASS（以防万一，您会问与您的自定义 CSS 如何无法工作并重新加载相同的问题）...哎呀，我想在接触 Ionic 之前需要了解很多知识。

有一点值得指出，如果您不是来自 Angular 背景，您可能不知道自 Ionic docs don't tell developers about Angular UI Router, you only get to know about it from the Ionic Learn page 以来 Ionic 中的导航系统，对于初学者来说看起来更高级.

我知道，这很难；我之前遇到过你的情况，我也有同感。

无论如何，祝您学习 Ionic 愉快 :)

Answer 2

@ekussberg:

我的最终设置包括：

  .state('app.playlists', {
        url: '/playlists',
    templateUrl: 'templates/playlists.html',
        controller: 'PlaylistsCtrl'
    })

  .state('app.playlist', {
    url: '/playlists/:playlistId',
    templateUrl: 'templates/playlist.html',
    controller: 'PlaylistCtrl'
  });

请注意播放列表状态的调用方式，url 与您的不同。

Answer 3

@蛋糕:

我已经像这样尝试过并且它有效，但是 iOS 和 Web 上的转换并不像默认方式那样流畅。我认为这取决于路由的 "views" 元素。

此代码例如有效，但转换无效：

.state('app.todo', {
  url: '/todo',
  views: {
    'menuContent': {
      templateUrl: 'templates/todo-list.html',
      controller: 'TodoListCtrl'
    }
  }
})

.state('app.todo.single', {
  url: '/:todoId',
  views: {
    'menuContent@app': {
      templateUrl: 'templates/todo-single.html',
      controller: 'TodoSingleCtrl'
    }
  }
})

侧边菜单离子的主细节

Master detail with sidemenu ionic

master-detail

angularjs

cordova

ionic-framework