Access fa-surfaces from Controller to get real Width/Height

[elinfante]

Hi,

I have the following template directive. I am using ng-repeat to duplicate them, but I do not know how to access those surfaces from the controller. What is the best practice to achieve that? As I need to get the real size (not just [undefined, undefined]) of my surfaces.

Thanks!

<fa-modifier  ng-repeat = "word in words" style="z-index: {{word.zindex}}" fa-size="[true, true]">

     <fa-surface fa-size="[undefined, undefined]" fa-properties="{fontFamily:'{{word.fontFamily}}',fontSize:'{{word.fontSize}}px' "> {{word.term}} </fa-surface>

</fa-modifier> 

[Nytrm]

You can add id's to your surfaces.

<fa-surface id="surface-{{$index}}" fa-size="[undefined, undefined]">Content</surface>

And use $famousProvider its Find function to get your surface by selector.

var surface = $famous.find('#surface-1')[0];
var size = surface.getSize();

[elinfante]

That helped but that does not seem to return a Surface object so then I can apply getSize():

Object {id: "02J", index: 1, getProperties: function, renderNode: Surface, renderGate: RenderNode…}

When I use fa.getSize() It throws an undefined error.

[Nytrm]

My bad (did not test the code), the surface you are looking for is inside renderNode.

var surface = $famous.find('#surface-1')[0].renderNode;
var size = surface.getSize();

Maybe use some if statements if the surface and renderNode is not undefined or null :-)

[elinfante]

Not sure why, but It comes as undefined. It is hard to tell as I cannot see how the fa-surface has been rendered.

<fa-surface id="surface-{{word.id}}" fa-background-color="'null'" fa-size="[undefined, undefined]" fa-properties="{fontFamily:'{{word.fontFamily}}',fontSize:'{{word.fontSize}}px',color: '#{{word.colour}}',zIndex: '{{word.zindex}}'}">
  {{word.term}}
  </fa-surface>

[elinfante]

I finally managed to get the size, but It was using this code instead:

var fa = $famous.find("#surface-mod1")[0].renderGate._object._size;
console.log(fa)

Result : [883,126]

[elinfante]

I also got the same result using the following code:

var fa = $famous.find("#surface-mod1")[0];
console.log(fa.renderNode._size)

[elinfante]

Thanks for your help Nytrm! I close the issue.