<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>testApp</title>
<link rel="stylesheet" href="style.css">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.3.0/ng-infinite-scroll.min.js"></script>
<script src="script.js" ></script>
</head>
<body ng-app="testApp" ng-controller="appCtrl as vm">
<button class="button button-positive" ng-click="vm.showPopup()">Show Popup</button>
<script id="templates/popup.html" type="text/ng-template">
<ion-content class="has-header has-footer" overflow-scroll="false">
<div class="list">
<div class="item"
ng-repeat="item in popup.list track by $index"
ng-if="$index < popup.limit">
item{{$index}}
</div>
</div>
<ion-infinite-scroll
on-infinite="popup.loadMore(popup.limit)"
spinner="android"
distance="10%">
</ion-infinite-scroll>
</ion-content>
</script>
</body>
</html>
// Code goes here
(function (angular) {
angular
.module("testApp", ["ionic", "infinite-scroll"])
.controller("appCtrl", AppCtrl)
AppCtrl.$inject = ["$scope", "$ionicPopup", "$timeout"]
function AppCtrl(Scope, IonicPopup, Timeout) {
var vm = this
vm.showPopup = function () {
var popup = Scope.popup = {}
popup.list = new Array(50)
popup.limit = 10
popup.loadMore = function (limit) {
console.log("loadMore is called!")
if (popup.busy) {
console.log("popup already loading.."); return
}
popup.busy = true
// Using a time out to show some spinner to know its working.
Timeout(function () {
popup.limit = popup.limit + 10
popup.showLoader = showLoader()
if (!popup.showLoader) {
popup.showLoader = false
console.log("showLoader is false")
} else {
popup.busy = false
}
}, 1000)
}
function showLoader() {
return popup.busy && popup.list.length > popup.limit
}
IonicPopup.show({
title: 'A list',
templateUrl: 'templates/popup.html',
scope: Scope,
buttons: [{
text: 'ok',
type: 'button-positive',
onTap: function (e) {
// prevents closing popup
// e.preventDefault()
console.log("Ok ")
}
}, {
text: 'Cancel',
type: 'button-default',
onTap: function (e) { }
}]
}).then(function () {
Scope.popup = null
})
}
}
})(angular)
/* Styles go here */