Question

我无法将我的应用分成多个可重复使用的组件。我有一个页面，我想在屏幕左侧显示一个列表，当选择此列表的项目时，其详细信息显示在右侧。

我有我的

 .state('app.test', {
                url: "/test",
                views: {
                    'menuContent': {
                        templateUrl: "templates/main.html",
                        controller: "TestCtrl"
                    },
                    'testList@app.test': {
                        templateUrl: "partials/list.html",
                        controller: "TestListCtrl"
                    },
                    'testDetails@app.test': {
                        templateUrl: "partials/details.html",
                        controller: "TestDetailsCtrl"
                    }
                }

其中test.html应加载one.html仅包含

<ion-nav-view name="testList"></ion-nav-view>
<ion-nav-view name="testDetails"></ion-nav-view>

现在我已经部分了

<ion-content class="has-header">
    <div class="list card">
        Details
    </div>
</ion-content>

另一个包含我的＆＃34;详细＆＃34;图。

问题是只有最后<ion-nav-view>被渲染..我做错了什么？也许我开始使用错误的设计，所以我怎样才能将事物分开，以便我拥有：屏幕左侧的列表及其右侧的详细信息，同时保留两个＆＃34;卷轴＆＃34;分开？（我不希望细节可滚动）

Answer 1

编辑：我认为这可能是您正在寻找的内容： http://blog.scottlogic.com/2015/10/02/ionic-master-detail.html

简短回答

使用<ion-view></ion-view>代替<ion-nav-view></ion-nav-view>。然后，您可以通过将scroll属性设置为false来控制部分内部的滚动。

<ion-content scroll='false'></ion-content>

您可能需要考虑将<ion-pane></ion-pane>用于部分。比<ion-content>更简单，因为它适合内容。尺寸更容易，但缺乏滚动等功能...

可能看起来像这样：

<ion-nav-view>
    <ion-view name="firstPage">
        <ion-pane name="testList"></ion-pane>
        <ion-pane name="testDetails"></ion-pane>
    </ion-view>
</ion-nav-view>

然后，您可以使用UI路由器$stateProvider服务使用状态参数提供多个模板，这样您就可以在两个窗格中包含动态内容，并可以使用<ion-nav-view>导航到其他页面。< / p>

查看文档页面，了解有关路由和状态的更多信息：http://ionicframework.com/docs/api/directive/ionNavView/

为什么它不起作用

<ion-nav-view>指令旨在成为一个容器，您可以使用状态嵌套可在应用程序中导航的多个视图。

例如：

<ion-nav-view>
    <ion-view name="page-one"></ion-view>
    <ion-view name="page-two"></ion-view>
    <ion-view name="page-three"></ion-view>
</ion-nav-view>

以下是直接来自离子导航视图页面的文档：http://ionicframework.com/docs/api/directive/ionNavView/

ionNavView指令用于在应用程序中呈现模板。每个模板是一个国家的一部分。状态通常映射到URL，并以编程方式定义使用angular-ui-router（参见他们的文档，并记得在示例中用ion-nav-view替换ui-view。

当您的应用运行时，与nav-nav-view指令绑定的AngularUI路由器模块会查看＆＃39;状态＆＃39;您的应用通过网址进入，并向<ion-nav-view>指令提供与该状态相匹配的模板＆＃39;。使用两个不会工作因为UI路由器只会尝试将其提供给一个。

Ionic使用AngularUI路由器模块，因此可以组织应用程序界面进入各种“状态”。与Angular的核心$ route服务一样，可以使用URL 控制意见。但是，AngularUI路由器提供了更强大的功能状态管理器绑定到命名，嵌套和并行视图，允许在同一页面上呈现多个模板。此外，每个州都不需要绑定到URL，数据也可以被推到每个允许很大灵活性的状态。

如何将Ionic视图分成多个视图

1 个答案: