javascript - Ionic - 对具有不同内容的多个页面重复使用相同的 HTML 模板

Question

我正在构建一个具有多个页面的 Ionic 应用程序。许多这些页面具有相同的 HTML 结构，只是内容不同。如何只使用一个 HTML 文件并动态填充内容？这是通过每页的 Controller 完成的吗？或者有更好的方法来做到这一点吗？

以下是一个页面的 HTML 代码示例:

<ion-view title="Comparison">
<div class="bar bar-subheader bar-stable">
    <h5 class="text-center">Do you have many categories?</h5>
</div>
<ion-content class="has-subheader">
    <ion-list>
        <ion-item ui-sref="bar-chart" class="text-center">Yes</ion-item>
        <ion-item ui-sref="column-chart" class="text-center">No</ion-item>
    </ion-list>
</ion-content>

因此每页需要动态的部分是标题、h5 和列表项。

现在我每页都有一个单独的 HTML 文件。然后，我在 app.js 的 .state 中引用这些 HTML 文件，如下所示。

.state('comparison-nb-categories', {
  url: '/',
  templateUrl: 'templates/comparison/nb-categories.html'
})

可以通过 ui-sref 从另一个页面访问该页面，如下所示。

<ion-item ui-sref="comparison-nb-categories" class="text-center">No</ion-item>

Answer 1

我认为您可以为所有此类页面使用一个模板 html，但可以使用不同的 Controller ，并在此 Controller 中为模型分配正确的值。

.state('state1', {
            templateUrl: "templates/page1.html",
            controller: "FirstCtrl",
        })
.state('state2', {
            templateUrl: "templates/page1.html",
            controller: "SecondCtrl",
        });

html 将是

<ion-view title="{{title}}">
<div class="bar bar-subheader bar-stable">
    <h5 class="text-center">{{subheader}}</h5>
</div>
<ion-content class="has-subheader">
    <ion-list ng-repeat="item in items">
        <ion-item ui-sref="{{item.ref}}bar-chart" class="text-center">{{item.name}}</ion-item>
    </ion-list>
</ion-content>

第一个Ctrl

.controller('FirstCtrl', ['$scope', function ($scope) {
    $scope.title = Title1;
    $scope.subheader = Subheader1;
    $scope.items = [{name:'Yes', ref:'bar-chart'},{name:'No', ref:'column-chart'}];

第二个Ctrl

.controller('SecondCtrl', ['$scope', function ($scope) {
    $scope.title = Title2;
    $scope.subheader = Subheader2;
    $scope.items = [{name:'name1', ref:'ref1'},{name:'name2', ref:'ref2'}];

我添加了工作示例 http://codepen.io/anon/pen/bEpKJE?editors=101