Show with delay directive 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

&lt;a class="button button-block rounded" show-with-delay="6000"&gt;CLICK ME&lt;/a&gt;


button will be displayed after 6 sec.
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.