surface selection in famo.us + angular

Question

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

I have this markup

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

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?

Answer 1

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

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.