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文件。然后我在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，但不同的控制器和此控制器将正确的值分配给模型。

.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

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

1 个答案: