Question

我想知道如何选择特定的fa-surface元素，以便我可以在控制器中将它们作为表面对象处理。

我有这个标记

    <fa-modifier ng-repeat="item in list">
      <fa-image-surface fa-click="itemClick($index)"> 
        {{item.name}}
      </fa-image-surface>
    </fa-modifier>

在itemClick（）上，我希望能够在我的控制器中应用修改器以在特定表面上作为对象进行操作（在没有角度的famo.us中看起来很典型）。

现在，如果我尝试这样的话

    <fa-modifier fa-translate="redTrans.get()"  ng-repeat="item in list">
      <fa-image-surface fa-click="itemClick($index)"> 
        {{item.name}}
      </fa-image-surface>
    </fa-modifier>

并且，在我的控制器中使用事件发射器，执行此操作

var EventHandler = $famous['famous/core/EventHandler'];
$scope.eventHandlerA = new EventHandler();
$scope.eventHandlerB = new EventHandler();
$scope.eventHandlerA.pipe($scope.eventHandlerB);

$scope.itemClick = function(i){
  console.log('item '+i+' clicked');
  $scope.eventHandlerA.emit('myEvent');
}

$scope.eventHandlerB.on('myEvent', function() {
  $scope.redTrans.set([0, 200, 0], {duration: 2000, curve: 'easeInOut'})
});

所有项目都经过翻译。有没有办法得到有问题的表面对象，以便我只能翻译被点击的对象？

Answer 1

在控制器中，创建与列表中对象相对应的对象：

    ///////////////////////////////
    // Define Surface object

    function SurfaceObject(idx) {

        // Properties
        this.idx = idx;
        this.position = new Transitionable([0, 0, 0]);

        this.itemClick= function() {
                this.position.set([0, 200, 0], {
                    method : 'spring',
                    period : 150,
                    velocity : [0,0,0]
                });
        }.bind(this);


        // Transform Methods
        this.transform = function() {
            var currentTilePosition = this.position.get();
            return Transform.translate(currentTilePosition[0], currentTilePosition[1], currentTilePosition[2]);
        }.bind(this);

    }

然后创建您的列表：

$scope.list = [];
for (var i = 0; i <= 20; i++) {
        $scope.list.push(new SurfaceObject(i));
    }

在您的HTML代码中：您现在可以执行此操作：

<fa-modifier ng-repeat="item in list" fa-transform="item.transform">
  <fa-image-surface fa-click="item.itemClick()"> 
    {{item.name}}
  </fa-image-surface>
</fa-modifier>

每次点击只会启动一次对象转换。

在famo.us + angular中的表面选择

1 个答案: