离子型-对不同内容的多个页面重复使用相同的HTML模板

Question

我正在构建一个多页的Ionic应用程序。这些页面中有很多都有相同的HTML结构，只是内容不同。如何使用一个HTML文件并动态填充内容？这是通过每个页面的控制器完成的吗？还是有更好的方法来做这件事？

下面是一个页面的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文件。然后，我在.state中引用app.js中的这些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，但是不同的控制器，并且在这个控制器中为模型分配正确的值。

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

FirstCtrl

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

SecondCtrl

.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