--- layout: "docs_api" version: "unstable" versionHref: "/docs/unstable" path: "api/directive/faRenderNode/" title: "fa-render-node" header_sub_title: "Directive in module famous.angular" doc: "faRenderNode" docType: "directive" ---
Improve this doc

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

```html ```

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.

{% assign lvl = page.url | append:'X' | split:'/' | size %} {% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

  Edit in Plunker 
{% raw %}<fa-app ng-controller="RenderCtrl">
  <fa-render-node fa-node="masterView" id="render"></fa-render-node>
</fa-app>

<script>
  angular.module('faRenderNodeExampleApp', ['famous.angular'])
      .controller('RenderCtrl', ['$scope', '$famous',function($scope, $famous) {

        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);

    }]);
</script>{% endraw %}
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}