Question

我试图通过侧面菜单来理解离子中的主细节（MD）模式。示例代码包含＆＃39;播放列表＆＃39;作为主人和＆＃39;播放列表＆＃39;作为细节。州看起来像这样：

    .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”＃。我没有看到单词＆＃39;单词＆＃39;代码中的任何其他位置。如果我想要在第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>
....

播放列表MD一直在运作，但我自己的MD并没有。我确实获得了包含项目的主列表（控制器和服务工作正常），但是当我单击列表中的项目时，没有任何反应。然后，当我向后滑动（这应该打开侧面菜单）时，详细信息页面会有一些＆＃39;显示没有CSS或数据。所以某处出现了故障。我似乎并不了解整个州/网址的事情，而我读了足够的文档..

Answer 1

我想，你是Ionic的新手，不知道AngularJS和Angular UI路由器。

首先，状态中的点符号是标记一些将从一个指定的父视图继承的子项。当您在 www / js / app.js 中阅读时，您会看到状态 .state（'app'），这是父视图， menu.html ，子视图将替换为此标记，或称为Angular指令

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

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

首先，父名称，点前面的单词，如sidemenu的示例， app。[child_name]
第二，子视图应通过视图属性指定父视图的哪一部分，如上例所示，

您会看到 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 ，那么该网址将为＃/ cats / 5 ;好的，让我们访问显示ID为5的猫的信息的单页。这就是你在现实中解释它的方式。

我建议学习离子，

首先，了解基本的AngularJS，https://angularjs.org/
其次，与Angular UI路由器导航系统http://angular-ui.github.io/ui-router/
第三，练习使用非常小的Ionic应用创建复杂 Hello Ionic。

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

播放列表MD一直工作，但我自己的MD没有。我明白了带有项目的主列表（控制器和服务工作正常），但是当我单击列表中的项目时，没有任何反应。然后我刷卡返回（这应该打开侧面菜单），详细页面'排序'显示没有CSS或数据。所以某处有一个小故障。我只是没有似乎理解整个州/网址的事情，而我读得够多文档..

我可以看到你阅读，但是如果你知道所需的东西，你会问自己吗？

在Ionic framework的首页，我可以看到 AngularJS ，我可以看到 ngCordova ，我也看到 SASS （其中万一，你会问同样的问题，你的自定义CSS将如何工作和重新加载）...我想，在你拿到Ionic手之前要知道很多件事。

有一点值得指出的是，如果你不是来自Angular背景，你可能不知道Ionic中的导航系统，因为Ionic docs没有告诉开发人员关于Angular UI路由器，你只能得到从Ionic Learn page了解它，对初学者来说看起来更先进。

我知道，这很难;我之前处于你的境地，我也有同感。

无论如何，学习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'
  });

注意如何调用播放列表状态，并且网址与您的不同。

Answer 3

@Cake：

我已经尝试过这样的功能，但是它在iOS和Web上的转换与默认方式不同。我认为这取决于＆＃34;观点＆＃34;路由的元素。

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

＆＃13;

.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'
    }
  }
})

＆＃13;

主要细节与sidemenu离子

3 个答案: