離子 - 爲具有不同內容的多個頁面重複使用相同的HTML模板

Question

我正在用多個頁面構建一個離子應用程序。許多這些頁面具有相同的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