Delay Transitionable in ng-repeat directive

[elinfante]

Hi,

Using the following code as an example:

In the directive:
<fa-modifier fa-translate="[tickerTransitionable.get(), word.yPos ,0]" ng-repeat = "word in words"  fa-size="[true, true]">

  <fa-surface fa-background-color="'null'" fa-size="[undefined, undefined]" >
  {{word.term}}
  </fa-surface>

</fa-modifier> 

In the controller:
$scope.tickerTransitionable = new Transitionable(1920);
$scope.tickerTransitionable.set(0, {duration:3000});

How can I apply a Transitionable delay to each element of the ng-repeat? When I apply the tickerTransitionable, that applies to all the elements and I cannot do a delay on the animation. Any idea?

[elinfante]

After some research I managed to find a solution using a directive animation:

angular.module('buzzRadarPanel').directive('ticker', 
    ['$famous','$famousDecorator', '$timeout', 
    function ($famous, $famousDecorator, $timeout) {
        return {
        restrict: 'A',
        scope: false,
        priority: 16,
        compile: function(tElement, tAttrs, transclude) {
          var Transitionable = $famous['famous/transitions/Transitionable'];
          return {
            pre: function(scope, element, attrs) {

            },
            post: function(scope, element, attrs) {

                var startValue = attrs.start;
                var endValue = attrs.end;
                var duration = attrs.duration;
                var delay = attrs.delay;
                var idanim = attrs.idanim;

                //$timeout function to ensure that the animation will call on the next Famous engine tick.
                $timeout(function() {

                    var wordSize = $famous.find('#surfaceWord'+idanim)[0].renderNode._size;
                    animate();

                    function animate() {
                        scope.tickerTransitionable = new Transitionable(startValue);
                        scope.tickerTransitionable.delay(delay)
                        scope.tickerTransitionable.set(-wordSize[0], {duration:duration},animate);
                    }

                }); 

            }

          }
        }
    }
    }]);

And this is the directive Template for it:

<fa-modifier ticker start="1920" end="-500" duration="{{word.duration}}" delay="{{word.delay}}" fa-translate="[tickerTransitionable.get(), word.yPos ,0]" ng-repeat = "word in words" style="z-index: {{word.zindex}}" fa-size="[true, true]" idanim="{{word.id}}" >