Angularjs 如何将Ionic视图分离为多个视图

我无法将我的应用程序分离为多个可重用组件。 我有一个页面，其中我希望屏幕左侧有一个列表，当选择此列表中的某个项目时，其详细信息显示在右侧

 .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"
                    }
                }

我有我的

 .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应加载一个。html仅包含

 .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"
                    }
                }

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

现在我有了一部分

 .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"
                    }
                }

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

细节

另一个包含我的“详细”视图

 .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"
                    }
                }

问题是只有最后一个

被渲染。。我做错了什么？ 也许我开始的设计是错误的，所以我怎样才能把东西分开，这样我就：

---

屏幕左侧的列表和右侧的详细信息，同时保持两个“滚动”分开？（我不希望详细信息可以滚动）

编辑：我想这可能就是您想要的：

 .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"
                    }
                }

 .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"
                    }
                }

简短回答

 .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"
                    }
                }

使用

而不是

。然后，您可以通过将scroll属性设置为false来控制分区内的滚动

 .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"
                    }
                }

 .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"
                    }
                }

您可能想考虑使用部分代码< >代码>代码。比

更简单，因为它适合于内容。更容易调整大小，但缺少滚动等功能

 .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"
                    }
                }

可能是这样的：

 .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"
                    }
                }

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

以下是直接来自ion nav视图页面的文档：

 .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"
                    }
                }

ionNavView指令用于在应用程序中呈现模板。每个模板 是一个国家的一部分。状态通常映射到url，并通过编程进行定义 使用angular ui路由器（参见他们的文档， 记住在示例中用ion nav视图替换ui视图）

 .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"
                    }
                }

当你的应用程序运行时，ion nav view指令所绑定的AngularUI路由器模块通过URL查看你的应用程序所处的“状态”，并为

指令提供与该“状态”匹配的模板。使用两个将不起作用，因为UI路由器将只尝试为一个提供服务

 .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"
                    }
                }

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

 .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"
                    }
                }

---

你能拼出一支密码笔吗？