<html ng-app="meizipu">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
    <title>Ionic Seed App</title>


    <link href="https://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>

    <script src="cordova.js"></script>


  </head>
  <body ng-controller="mainCtrl">

    <ion-header-bar class="bar-energized">
      <h1 class="title">slide box in modal</h1>
    </ion-header-bar>

    <ion-content>
      <div class="list">
        <div class="item item-input-inset">
          <label class="item-input-wrapper">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text">
          </label>
        </div>

        <div class="item item-thumbnail-left" ng-click="openModal()">
          <img src="">
          <h2>hehe</h1>
          <p>lala<br>llld</p>
        </div>

        <ion-slide-box >
          <ion-slide>
            <h1>a</h1>
          </ion-slide>
          <ion-slide>
            <h1>b</h1>
          </ion-slide>
          <ion-slide>
            <h1>c</h1>
          </ion-slide>
        </div>
      </ion-slide-box>
    </div>
  </ion-content>


</body>
</html>

<script id="modal.html" type="text/ng-template">
  <div class="modal">
    <div class="bar bar-header bar-energized">
      <button class="button button-clear" ng-click="closeModal()"><i class="icon ion-arrow-left-c"></i></button>
      <h1 class="title">itemDetail</h1>
    </div>
    <ion-content padding="true">

      <ion-slide-box >
        <ion-slide>
          <h1>a</h1>
        </ion-slide>
        <ion-slide>
          <h1>b</h1>
        </ion-slide>
        <ion-slide>
          <h1>c</h1>
        </ion-slide>
      </ion-slide-box>


    </ion-content>
  </div>
</script>
.slider-slide {
  min-height: 200px
}
var meizipu = angular.module("meizipu",['ionic']);

meizipu.controller("mainCtrl",function($scope,$ionicModal, $ionicSlideBoxDelegate, $timeout) {
		$ionicModal.fromTemplateUrl('modal.html', {
    	scope: $scope,
    	animation: 'slide-in-up'
  		}).then(function(modal) {
    		$scope.modal = modal;
    		//modal.show();
  		});
  	$scope.openModal = function() {
  		/*$ionicModal.fromTemplateUrl('modal/itemModal.html', {
    	scope: $scope,
    	animation: 'slide-in-up'
  		}).then(function(modal) {
    		$scope.modal = modal;
    		modal.show();
  		});*/
    	$scope.modal.show();
      
      $timeout( function() {
        $ionicSlideBoxDelegate.update();
      });
  	};
  	$scope.closeModal = function() {
    	$scope.modal.hide();
  	};
});

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.