Angular - MotherEffing Blink Tag!!!

and new promise cancel functionality...

by Daedalus

HTML

<div ng-app="blink">
    <div ng-controller="test">
        <span blink="cursor">blink</span>
        <button ng-click="toggle()">click me</button>
    </div>
</div>

CSS

span {
    background-color:yellow;
}
</style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>

JavaScript

var blink = angular.module('blink', [])
    .directive('blink', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        transclude: false,
        scope: {
            cursor: '=blink'
        },

        link: function ($scope, $element, $attrs) {
            var promise,
                showElement = function () {
                    $element.animate({opacity: 1}, 'normal', 'swing');
                    if ($scope.cursor.blink === true) {
                        promise = $timeout(hideElement, $scope.cursor.speed);
                    }
                },
                hideElement = function () {
                    $element.animate({opacity: 0}, 'normal', 'swing');
                    if ($scope.cursor.blink === true) {
                        promise = $timeout(showElement, $scope.cursor.speed);
                    }
                };
            $scope.$watch($attrs.blink + '.blink', function () {
                if ($scope.cursor.blink === true) {
                     showElement();
                } else {
                    
                     $element.css("opacity", 1);
                }
            });
            showElement();
        }
    };
}])
    .controller('test', ['$scope', function ($scope) {
    $scope.cursor = {
        speed: 600,
        blink: true
    };
        $scope.toggle = function () {
            $scope.cursor.blink = !$scope.cursor.blink;
        };
}]);