Custom directive on vanilla famous surface

[janober]

Hello, When I create a custom directive and add it to the index.html it works fine. However, even with a lot of testing and trying, I was not able to get the same directive working on a surface I created through vanilla famous. Is that a known issue? (or maybe even expected?) Thanks!

[steveblue]

I don't think you are using the framework as it is meant to be used. Vanilla Famo.us surfaces only support document fragments, strings, and possibly one other data type. When using famous/angular, it is best to use this pattern:

<fa-modifier>
<custom-directive></custom-directive>
</fa-modifier>

Inside custom directive:

<fa-grid-layout fa-options="content.share.layout">

    <fa-surface>
      <div class="icon"></div>
    </fa-surface> 

    <fa-surface>
      <div class="icon"></div>
    </fa-surface> 

    <fa-surface>
      <div class="icon"></div>
    </fa-surface> 

    <fa-surface>
      <div class="icon"></div>
    </fa-surface> 

</fa-grid-layout>

If you need to access features of famo.us that are not currently supported you can use the $famous provider to find that surface and target its renderNode.

[janober]

Ah that is what I feared. I started out that way but then rewrote my test code to create everything in vanilla-famous because of the "missing" draggable (#168). But because I have now the work around for that will now go back to the initial version. Thanks!

[zackbrown]

I'm not sure I totally track what you're describing in your original question here without a code snippet, @janober, but one other solution that you could investigate is fa-render-node, which allows you to attach a vanilla Famo.us component or subtree anywhere in a Famo.us/Angular view.

For example (from the docs)

Controller:

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

View:

<fa-render-node fa-node="masterView"></fa-render-node>

[janober]

Great, thanks a lot. This will come in handy!