fa-flipper

This directive will create a Famo.us Flipper containing the specified front and back elements. The provided options object will pass directly through to the Famo.us Flipper's constructor. See [/docs/views/Flipper]

Dependencies

TODO:famous

Usage

<fa-flipper fa-options="scopeOptionsObject">
  <!-- two render nodes -->
</fa-flipper>

Example

A Famous Flipper has a .flip() method that toggles a rotation between front and back sides. In the example below, when an fa-surface is clicked, it calls the function flipIt.

This function attempts a DOM lookup for an isolate of an fa-flipper element, and calls the .flip() function of fa-flipper.

Edit in Plunker

<fa-app ng-controller="FlipperCtrl">
  <fa-flipper>
    <fa-modifier fa-size="[200, 200]">
      <fa-surface fa-background-color="'yellow'" fa-click="flipIt()">Click me to see me flip!</fa-surface>
    </fa-modifier>  
    <fa-modifier fa-size="[200, 200]">
      <fa-surface fa-background-color="'red'" fa-click="flipIt()">Flip me again!</fa-surface>
    </fa-modifier>  
  </fa-flipper>
</fa-app>

fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
div {
  cursor: pointer;
  padding: 8px 8px;
}

angular.module('faFlipperExampleApp', ['famous.angular'])
  .controller('FlipperCtrl', ['$scope', '$famous', function($scope, $famous) {
    $scope.flipIt = function() {
       $famous.find('fa-flipper')[0].flip();
    };
}]);