Question

因此，目标是使一些按钮大小为宽度和宽度的20％。屏幕高度。在常规的Famo.us中，这有效：

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

但是，在Angular中，当我在HTML中使用fa-size时，它不会计算我的对象：

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

在角度控制器中我有：

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

Answer 1

解决。只需编写一个函数，将数组返回到fa-size：

<-- HTML -->

fa-size="myButtonSize"

//JS

$scope.myButtonSize = function () {

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

}

Answer 2

使用fa-scale。我相信你必须将修改器叠加到大小，然后缩放表面。

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

通过Famo.us / Angular中的对象设置大小

2 个答案: