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

Question

我是离子的新手，我必须在每个离子滑块中设置不同的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

您可以使用ng-include指令来实现。 工作的笨蛋。

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

Answer 2

也许您在考虑动态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>

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-01-01 16:43:13

解决方案2
0 2016-01-01 16:09:44

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-01-01 16:43:13

解决方案2 0 2016-01-01 16:09:44

解决方案1
1 已采纳 2016-01-01 16:43:13

解决方案2
0 2016-01-01 16:09:44