Show with delay directive

Question

I'm pretty new to AngularJS and have made my first directive. Is this a good or a bad way to do this? It works, but can't figure out if this is clever or not.

.directive('showWithDelay', function($timeout){
    return {
        restrict: 'A',
        link: function($scope, $element, attrs){
            $element.addClass("ng-hide");
            $timeout(function() {
                $element.removeClass("ng-hide");
            },attrs.showWithDelay);
        }
    }
})

Usage in template

<a class="button button-block rounded" show-with-delay="6000">CLICK ME</a>

button will be displayed after 6 sec.

Answer 1

Looks fine to me, I would add some small changes:

If you create a directive/service/controller/.. in Angular it's a best practice to create them with the [ ] notation to make sure minifying your code won't break:

.directive('name', [ '$timeout', function ($timeout) { 

} ] );

In your example a minifier would change the $timeout variable to something as 'a' which will result in an error because 'a' is not registered and thereby not known by Angular's dependency injection system.

In my example if a minifier would change $timeout it doesn't matter at all since a minifier doesn't change string values. A rule of thumb, always ngminify your code before jsminify.

And as last I would add a default value for the timeout function:

 $timeout(function () {
     $element.removeClass("ng-hide");
 }, attrs.showWithDelay || 5000);

This way if someone does not provide an attribute it will take the default value of 5000.