Recently, I added a progress bar to one of the slides in my ion slide box. The initialization of the progress bar is done within the slide controller:
//partial code
var appControl = angular.module('volCtrlPanel.controllers', []);
appControl.controller('VolIndCtrl', function($scope, $state, $http, $rootScope) {
var circle = new ProgressBar.Circle('#progress', {
color: '#FCB03C',
trailColor: '#ddd',
strokeWidth: 3,
duration: 55
});
var defaultVol = 0;
circle.set(defaultVol);
The div containing the progress bar is located in a template within my index.html file:
<script id="templates/control.html" type="text/ng-template">
<ion-view>
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="center" id="background">
<div id="button-container">
<!-- This is where the progress bar is located -->
<div class="progress" id="progress"></div>
</div>
</div>
</ion-slide>
</ion-slide-box>
</ion-view>
</script>
Sadly, I encountered an error stating that the progress bar container does not exist:
ionic.bundle.js:20434 Error: Container does not exist: #progress
This issue only arises when the progress bar is placed within the ion slide box. Strangely, the container definitely exists within the div, so it's puzzling why the ion slide box is causing this problem. Could it be that the progress bar object is not being created while inside a slide? Any assistance would be greatly appreciated!