0

我想知道如何选择特定的 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'})
});

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

4

1 回答 1

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>

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

于 2014-11-24T18:08:38.297 回答