fa-render-node

A directive to insert a Famo.us RenderNode that is a wrapper for inserting a renderable component (like a Modifer or Surface) into the render tree. It allows you to pass a reference to an arbitrary render node from your controller.

Usage

<fa-render-node fa-node="arbitrary render node reference">
    <!-- content -->
</fa-render-node>

Example

Fa-render-node can wrap a custom-made widget or any renderable component from Famous and allow it to be inserted in the Render Tree.

All Famous widgets, such as a Scroll View, a Sequential Layout, or a Header-footer-layout, are extended Famous Views. Fa-render-node allows a developer to create & extend their own Famous View, and use it within their own Famous-Angular app.

In the example below, a Famous View is instantiated on the scope; a Modifier is added to it, and then a Surface is added below. This approach of creating a View and adding renderables to it with the .add() method is more in line with a "vanilla Famous" approach than a declarative approach with Famous-Angular.

In the html view, an fa-render-node is declared, with an fa-node attribute bound to the newly-created View on the scope, resulting in our custom View appearing on the page.

var View = $famous['famous/core/View'];
var Modifier = $famous['famous/core/Modifier'];
var Surface = $famous['famous/core/Surface'];
var Transform = $famous['famous/core/Transform'];

$scope.masterView = new View();

var _surf = new Surface({properties: {backgroundColor: 'red'}});
_surf.setContent("I'm a surface");

var _mod = new Modifier();

var _width = 320;
var _height = 568;
_mod.transformFrom(function(){
  return Transform.translate(Math.random() * _width, 0, 1);
});

$scope.masterView.add(_mod).add(_surf);
<fa-render-node fa-node="masterView" id="render"></fa-render-node>