<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Image add SlideBox Sample ver 0.3 (ionic ver 0.9.27)</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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>Image add SlideBox Sample ver 0.3 (ionic ver 0.9.27)</title>
<link href="https://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar title="Image add SlideBox Sample ver 0.3 (ionic ver 0.9.27)" type="bar-royal"></ion-header-bar>
<ion-content has-header="true">
<div class="list card">
<div class="item item-text-wrap">
<div class="row">
<div class="col col-100 text-center">
<ion-slide-box>
<ion-slide ng-repeat="panel in panels">
<img class="slide-panel" ng-src="{{panel.src | trustedResource}}">{{panel.src}}</div>
</ion-slide>
</ion-slide-box>
</div>
</div>
<div class="row">
<div class="col col-20 text-center">
<button class="button icon ion-arrow-left-b" ng-click="showPrevSlide()">show prev panel</button>
</div>
<div class="col col-20 text-center">
<button class="button icon ion-arrow-right-b" ng-click="showNextSlide()">show Next panel</button>
</div>
</div>
<div class="row">
<div class="col col-100 text-center">
<p>Image Add Buttons</p>
</div>
</div>
<div class="row">
<div class="col col-20 text-center">
<button class="button icon ion-image" ng-click="addPanel('https://pbs.twimg.com/profile_images/378800000234463046/4c558ca34bff6f0d3162e486d3c467d2.jpeg')">none emit(1)</button>
</div>
<div class="col col-20 text-center">
<button class="button icon ion-image" ng-click="addPanel('https://pbs.twimg.com/profile_images/378800000702341897/d71c65f9d91f144e5cb3bf9ba6820043.jpeg')">none emit(2)</button>
</div>
<div class="col col-20 text-center">
<button class="button icon ion-image" ng-click="addPanelCtrlEmit('http://stepup-j.img.jugem.jp/20100316_1688463_t.jpg')">Emit from the controller</button>
</div>
<div class="col col-20 text-center">
<custom-Button>Emit from the directive</custom-Button>
</div>
<div class="col col-20 text-center">
<custom-Button2 ng-click="directiveCtrlEmit()">Emit from the directive(ng-click)</custom-Button2>
</div>
</div>
</div>
</div>
</ion-content>
<script id="/button.html" type="text/ng-template">
<button class="button icon ion-image"><span ng-transclude=""></span></button>
</script>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/nobu19711208/image-add-slidebox-sample-ver-03-ionic-ver-0927-Bjrhq */
.slide-panel {
width:100%; /*fail %,em,px*/
height:150px;
}
/*Downloaded from https://www.codeseek.co/nobu19711208/image-add-slidebox-sample-ver-03-ionic-ver-0927-Bjrhq */
angular.module('app', ['ionic'])
.config(['$sceDelegateProvider','$compileProvider'
,function($sceDelegateProvider,$compileProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['**']);
$compileProvider.imgSrcSanitizationWhitelist(/^.*/);
}])
.filter('trustedResource', ['$sce', function($sce) {
return function(val) {
return $sce.getTrustedResourceUrl(val);
};
}])
.controller('MainCtrl',['$scope','$ionicSlideBoxDelegate',
function($scope,$ionicSlideBoxDelegate) {
$scope.panels=[];
$scope.showPrevSlide=function() {
$scope.$broadcast('slideBox.prevSlide');
}
$scope.showNextSlide=function() {
$scope.$broadcast('slideBox.nextSlide');
}
$scope.onSlideChanged=function(index) {
console.log('onSlideChanged('+index);
}
$scope.addPanel=function(src) {
$scope.panels.push({src:src});
$ionicSlideBoxDelegate.update();
}
$scope.addPanelCtrlEmit=function(src) {
console.log('addPanelCtrlEmit!!');
$scope.$emit('addPanelEvent',src);
}
$scope.$on('addPanelEvent',function(event,src) {
console.log('on addPanelEvent!!');
$scope.panels.push({src:src});
$ionicSlideBoxDelegate.update();
event.preventDefault();
return false;
});
}])
.directive('customButton', [function() {
return {
restrict:'E',
templateUrl:'/button.html',
transclude:true,
replace:true,
scope: {
},
controller: ['$scope', function($scope ){
}],
link: function($scope, element, attrs) {
element.on('click',function(event) {
console.log('click directive button!!');
console.log('fire! directive button clickevent');
$scope.$apply(function(){
$scope.$emit('addPanelEvent','https://www.thisone.co.jp/common/images/shops/3/event/568_image0.jpg');
});
});
}
};
}])
.directive('customButton2', [function() {
return {
restrict:'E',
templateUrl:'/button.html',
transclude:true,
replace:true,
scope: {
},
controller: ['$scope', function($scope ){
$scope.directiveCtrlEmit=function() {
console.log('fire! directive button clickevent（directiveCtrlEmit）');
$scope.$emit('addPanelEvent','https://www.thisone.co.jp/common/images/shops/3/event/568_image0.jpg');
}
}],
link: function($scope, element, attrs) {
}
};
}]);
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
jQuery
