2
\$\begingroup\$

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.

\$\endgroup\$
3
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.