Member Avatar for BenWard

Hi Guys,

I've been playing around with Angular and Ionic tutorials and I'm attempting to put together things I've learnt from different tutorials to build a simple NPR audio player.

I have a really really anoying issue with ng-show/ng-hide...

Basically, in the bottom left hand corner of my application I have a play/pause button. Acutally it's 2 buttons, a play button and a pause button, they are both supposed to occupy the same space (i.e. only one of them being visible at once) so I have used ng-show and ng-hide on them. When player.paused is true, the play button is visible, when player.paused is false, the pause button is visible. Clicking either button triggers the player.playPause() function via ng-click which will be used to actually control the audio playback. One of the actions of this function is to toggle player.paused.

It works fine, you click the play button, it hides the play button and replaces it with a pause button and vice-versa. The issue is that for a split second both buttons are visible as Angular seems to give priority to making things visible over making things invisible. I snapped the below screenshot in the moments where both were visible so you can see...

npr.png

heres the html:

<div ng-show="player.playing" class="bar bar-footer bar-royal">
    <div class="buttons">
        <button ng-show="player.paused" class="button  button-clear icon ion-play" ng-click="player.playPause()"></button>
        <button ng-hide="player.paused" class="button  button-clear icon ion-pause" ng-click="player.playPause()"></button>
    </div>
    <div class="title"><h5>--progress bar to go here--</h5></div>
    <div class="buttons">
        <button class="button icon button-clear ion-stop pull-right" ng-click="player.toggle();"></button>
    </div>
</div>

and the javascript:

var player = {
    paused: false,
    playing: true,


    playPause: function(){
        player.paused = !player.paused;
    },

    toggle: function(){
        player.playing = !player.playing;
    }
}
$scope.player = player;

Has anyone come across this behaviour before? Is there an easy fix?

I'm thinking I could fix the width of the div that contains the buttons and set the overflow to hidden but that seems like a nasty hack to me that would potentially have issues on devices with different dpi screens.

Any easy magical solutions that I'm missing here?

Thanks
Ben

Edited by peter_budo because: Moving to web development
  • 1 Contributor
  • 1 Reply
  • 513 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by BenWard
Member Avatar for BenWard

In case anyone else has similiar issues and finds this whilst googling etc, a colleague assisted with this and we resolved by using just 1 button instead of 2 and using a ternary operatror in the ng-class angular attribute to switch the class out;

<div class="buttons">
    <button ng-class="player.paused ? 'ion-play' : 'ion-pause'" class="button  button-clear icon" ng-click="player.playPause()"></button>
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.