在 ion-slide 中设置不同的 html 文件

Question

我是 ionic 的新手，我必须在每个 ion-slide 中设置不同的 html 文件。

<ion-slide>
Here i have to set home.html file
<h3 class="text-center">slide2</h3>
</ion-slide>
<ion-slide>
Here i have to set city.html file
<h3 class="text-center">slide2</h3>
</ion-slide>
<ion-slide>
Here i have to set test.html file
<h3 class="text-center">slide2</h3>
</ion-slide>

Answer 1

也许您正在考虑动态 slidebox，即在每张幻灯片中使用 ng-include:

angular.module('app', ['ionic'])

.controller('SlideBoxController', function() {
  
  var vm = this;
 vm.items = [
    {title: 'Item 1', desc: 'Home', template: 'home.html'},
    {title: 'Item 2', desc: 'City', template: 'city.html'},
    {title: 'Item 3', desc: 'Test', template: 'test.html'}    
  ];
  
  vm.onSlideChanged = function(slideIndex) {
  // Do something when slide changes
  };
  
})

.slider {
  height: 300px;
  background-color: #eee;
}

.box {
  padding: 1em;
}

<html ng-app="app">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Ionic Slide Box</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>
  <ion-header-bar class="bar bar-header bar-calm">
    <h2 class="title">Slide Box</h2>
  </ion-header-bar>
  <ion-content scroll="false">
    <div ng-controller="SlideBoxController as vm">
      <ion-slide-box show-pager="true" on-slide-changed="vm.onSlideChanged($index)">
        <ion-slide ng-repeat="item in vm.items">
          <div class="box">
            <h2>{{item.title}}</h2>
            <p>{{item.desc}}</p>
            <div ng-include src="item.template"></div>
          </div>
        </ion-slide>
      </ion-slide-box>
    </div>
  </ion-content>
</body>

<script id="home.html" type="text/ng-template">
  <div class="list">
    <a class="item" href="http://learn.ionicframework.com/" target="_blank">
              Learn Ionic
            </a>
    <a class="item" href="http://ionicframework.com/docs/" target="_blank">
              Docs
            </a>
  </div>
</script>

<script id="city.html" type="text/ng-template">
  <div class="list">
    <h3>City view</h3>
  </div>
</script>

<script id="test.html" type="text/ng-template">
  <div class="list">
    <h3>Test view</h3>
  </div>
</script>

</html>

Answer 2

您可以使用 ng-include directive. Working plunker。

<ion-view title="{{tab.name}}">
    <ion-content class="has-header" padding="true">
        <ion-slide-box>
            <ion-slide>
                <ng-include src="'home.html'"></ng-include>
                <h3 class="text-center">slide2</h3>
            </ion-slide>
            <ion-slide>
                <ng-include src="'city.html'"></ng-include>
                <h3 class="text-center">slide2</h3>
            </ion-slide>
            <ion-slide>
                <ng-include src="'test.html'"></ng-include>
                <h3 class="text-center">slide2</h3>
            </ion-slide>
        </ion-slide-box>
    </ion-content>
</ion-view>

在 ion-slide 中设置不同的 html 文件

set a different html file in ion-slide

html

javascript

jquery

cordova

ionic