Setting Size via an object in Famo.us / Angular

Question

So the objective is to make some buttons the size of 20% of the width & height of the screen. In regular Famo.us, this works:

var ww = window.innerWidth * .2;
var hh = window.innerHeight * .2;

// later in the code

for(var i = 0; i < 2; i++) {
 surfaces.push(new Surface({
    content: "button",
    size: [ww, hh]
}));

However, in Angular when I use fa-size in the HTML, it's not calculating my objects:

<fa-modifier ng-repeat="item in list"
   fa-size="[ww, hh]"
   fa-origin="[0.5, 0.5]"
   fa-align="[0.5, 0.5]">
   <fa-surface fa-background-color="item.bgColor">
     {{item.content}}
   </fa-surface>
</fa-modifier>

In the Angular Controller I have:

angular.module('famousAngularStarter')
  .controller('MainCtrl', function ($scope, $famous) {

    var Transitionable = $famous['famous/transitions/Transitionable'];
    var Easing = $famous['famous/transitions/Easing'];
    var ww = window.innerWidth;
    var hh = window.innerHeight;

    $scope.myGridLayoutOptions = {
       dimensions: [2, 3]
    };
});

score 0 · Answer 1 · answered Sep 12 '14 at 10:19

Solved. Simply write a function that returns the array to the fa-size:

<-- HTML -->

fa-size="myButtonSize"

//JS

$scope.myButtonSize = function () {

      var ww = window.innerWidth * .2;
      var hh = window.innerHeight * .2;
      return [ww,hh];

}

score 0 · Answer 2 · answered Oct 23 '14 at 07:39

Use fa-scale. I believe you have to stack the modifiers to size, and then scale the surface.

<fa-modifier ng-repeat="item in list"
   fa-size="[undefined, undefined]">
<fa-modifier
   fa-scale="[0.2,0.2]"
   fa-origin="[0.5, 0.5]"
   fa-align="[0.5, 0.5]">
   <fa-surface fa-background-color="item.bgColor">
     {{item.content}}
   </fa-surface>
</fa-modifier>
</fa-modifier>

Setting Size via an object in Famo.us / Angular

2 Answers2