Flip using an element about angular-flippy HOT 14 CLOSED

in theory you should do this:

<flippy
    flip="['click']"
    flip-back="['custom:FLIP_BACK']"
    duration="800"
    timing-function="ease-in-out">
</flippy>

since FLIP_BACK is just an angular broadcast event, you'd need somewhere on your login button:

// in your ctrl
function loginClicked() {
    $rootScope.$broadcast('FLIP_BACK');
}

from angular-flippy.

Hi @zwacky, I did something like

$scope.buttonClicked = function() {
    console.log("click the button")
    $rootScope.$broadcast('FLIP_BACK');
  }

in my conroller. And

<div class="container">
<flippy
  class="fancy"
  flip="['click']"
  flip-back="['custom: FLIP_BACK']"
  duration="800"
  timing-function="ease-in-out">

<flippy-front>
  <img src="http://s.hswstatic.com/gif/buying-house1.jpg" alt="the front" />
</flippy-front>

<flippy-back>
  <span class='flippy-back-word'> flipped </span>
</flippy-back>

It is not working though. Any idea?

from angular-flippy.

mind creating a jsfiddle for this? i can easier see what's not working.

from angular-flippy.

just going over it i see that flip-back="['custom: FLIP_BACK']" should be flip-back="['custom:FLIP_BACK']", without the .

otherwise it would listen to the event FLIP_BACK instead of FLIP_BACK. can you check this?

from angular-flippy.

I just tried it. It didn't work. How could I include the plugin in jsfiddle?

from angular-flippy.

either just copy paste the content from the dist/js/angular-flippy.js directory or maybe better directly hotlink from https://raw.githubusercontent.com/zwacky/angular-flippy/master/dist/js/angular-flippy.js

from angular-flippy.

Sorry. I couldn't get the jsfiddle to work. What other information you want to look at?

from angular-flippy.

@wenwei63029869 if it's not working, you may also just fork the demo with your use case: http://jsbin.com/kenunu/edit?html,js,output

from angular-flippy.

There is a small error in flippy-directive.js. The original code ends up listening for "custom:EVENT" rather than "EVENT".
I have posted a pull request that fixes this:-)

from angular-flippy.

thanks again @raymondelferink for the fix!
@wenwei63029869 this might have been what you ran into. can you verify with version 2.0.3?
cheers

from angular-flippy.

Based on this matter and in order not to open another post please have a look at this jsbin.

As you can see dynamically assigning the event will not work due to binding way of the variable and the handling of it after.

from angular-flippy.

@immortalcy there was still an older lib version, got it working here: https://jsbin.com/cohehariho/1/edit?output

also, the html needs to look like this:

<flippy
    class="fancy"
    flip="['custom:FLIP' + ($index+1)]"
    flip-back="['click']"
    duration="800"
    timing-function="ease-in-out">

since flip is interpreted as = in the directive.

from angular-flippy.

perfect works like a charm...thanks

from angular-flippy.

I think we should close this issue, thank you Zwacky

from angular-flippy.