在famo.us +角面的选择 [英] surface selection in famo.us + angular

问题描述

我不知道我该如何选择特定的FA-表面的元素，这样我可以处理他们在一个控制器表面的物体。

I'm wondering how I can select specific fa-surface elements so that I can deal with them in a controller as surface objects.

我有这个标记

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

在itemClick在（），我希望能够在我的控制器在一个特定的表面作为一个对象中操作（如famo.us似乎没有典型的角），以应用修改。

On itemClick(), I want to be able to apply modifiers in my controller to operate on a particular surface as an object (as seems typical in famo.us without the angular).

现在，如果我尝试这样的事情

Right now, if I try something like this

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

和，使用事件发射器，在我的控制器，做到这一点。

and,using event emitters in in my controller, do this

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

所有项目进行翻译。有没有办法让有问题的曲面对象，这样我就可以只翻译单击的对象？

all items undergo the translation. Is there a way to get the surface object in question, so that I can translate only the object clicked?

推荐答案

在您的控制器上，创建相应的清单上的物体的对象：

In your controller, create an object corresponding of the objects on your list :

    ///////////////////////////////
    // 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);

    }

然后创建一个列表：

Then create your list :

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

在你的HTML code：你现在可以这样做：

In your HTML code: you can now do this :

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

和每次点击都会推出只有一个目标过渡。

And each click will launch only one object transition.

这篇关于在famo.us +角面的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！