Hello,
I am trying to build an mp3 player using ionic tabs.
I would like my player to be on the bottom of the screen, and I want it to be run only once. A single instance of this template and it s controller under the view that remains when tabs change. I need it to be able to access services.
At the moment I have just added the html on the index.html, but then I realized it won’t be able to run functions from my angular service.
What would be the best way to achieve it?
here is my actual code:
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
<div class="tPlayer">
<div class="time">
<span class="current-position">00:00</span><span class="duration">00:00</span>
</div>
<div class="tPlayer-range range range-calm">
<input id="range{{audio.id}}" type="range" name="time" min="0" max="100" value="0" ng-change="seekTo('{{audio.id}}')" ng-model="model.position">
</div>
<div class="tPlayer-buttons">
<button class="button button-clear"><i class="icon ion-ios-rewind-outline"></i></button>
<button class="button button-clear play"><i class="icon ion-ios-play-outline"></i></button>
<button class="button button-clear"><i class="icon ion-ios-fastforward-outline"></i></button>
<button class="button button-clear"><i class="icon ion-ios-loop"></i></button>
<button class="button button-clear"><i class="icon ion-ios-list-outline"></i></button>
</div>
</div>
</body>
Thank you