Angular: Empty Fiddle

http://angularjs.org/

by Bretto

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div ng-controller="MyCtrl">
  <ul>
      <li ng-repeat="item in items" 
          repeat-anim array="items">
        {{item.val}}
      </li>
  </ul>
  <hr />
  <button ng-click="items.push({val:items.length, _anim:'fade'})">Add Item With Fade</button>
    <br />
  <button ng-click="items.push({val:items.length, _anim:'slide'})">Add Item With Slide</button>    
</div>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.items=[];
}

myApp.directive('repeatAnim', function() {
    return {
        restrict: 'A',
        scope: {
            array: 'accessor'
        },
        template: '<div ng-init="runAnimOnLast()"><div ng-transclude></div></div>',
        transclude: true,
        controller: function($scope, $element, $attrs) {
            $scope.runAnimOnLast = function() {
                //Run anim on the item's element 
                //(which will be last child of directive element)
                var item=$scope.array()[$scope.array().length-1];
                var itemElm = jQuery($element)
                    .children()
                    .last()
                    .children();
                
                if (item._anim === 'none') {
                    
                } else if (item._anim === 'fade') {
                    itemElm
                        .css({ opacity: 0 })
                        .animate({ opacity: 1 }, 500);
                } else if (item._anim == 'slide') {
                    itemElm
                        .css({ 'margin-left': $('body').width() })
                        .animate({ 'margin-left': '0px' }, 500);
                }
            }              
        }
    };
});