JSFiddle - React, Tailwind, and code Playground

by olragon

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div ng-app="App" ng-controller="TestCtrl">
    <div ng-repeat="obj in objs">
        {{obj.name}}
        <button just-remove ng-click="justRemove(obj)">Just remove</button>
    </div>
    <hr/>
    <div ng-repeat="obj in objs">
        {{obj.name}}
        <button remove-with-fade-in-directive="obj,objs">Remove with fade on directive</button>
    </div>
    <hr/>    
    <div ng-repeat="obj in objs">
        {{obj.name}}
        <button remove-with-fade-in-controller="1000" ng-click="removeWithFade(obj)">Remove with fade on controller</button>
    </div>
    
</div>

JavaScript

var app = angular.module("App", []);
app.directive("justRemove", function() {
    return function(scope, element, attrs) {
        element.bind("$destroy", function() {
            console.log("element removed");
        });
    };
});

app.directive("removeWithFadeInDirective", function() {
    return function(scope, element, attrs) {
        element.bind('click', function() {
            $(element).parent().fadeOut(1000, function() {
                scope.$apply(function() {
                    var obj = scope.$eval(attrs.removeWithFadeInDirective.split(",")[0]),
                        array = scope.$eval(attrs.removeWithFadeInDirective.split(",")[1]);
                    array.splice(obj, 1);
                });
            });
        });
    };
});

app.directive("removeWithFadeInController", function() {
    return function(scope, element, attrs) {
        var time = scope.$eval(attrs.removeWithFadeInController);
        element.bind('click', function() {
            $(element).parent().fadeOut(time);
        });
    };
});

app.controller("TestCtrl", function TestCtrl($scope, $timeout) {
    $scope.works = "YES!";
    $scope.objs = [
        {
        name: "foo"},
    {
        name: "bar"},
    {
        name: "lol"}
    ];
    $scope.justRemove = function(obj) {
        $scope.objs.splice(obj, 1);
    };
    $scope.removeWithFade = function(obj) {
        $timeout(function() {
            $scope.objs.splice(obj, 1);
        }, 1000);
    };

});