How to declare Common method for multiple directive in Angularjs

Question

I have three lines of similar code in multiple directive, which is actually doing some bind an event handler to the "focus".

var ele = $(event.target);
$($(event.target)).attr('tabindex', -1);
$(ele).trigger('focus');

this is creating code duplication issue, creating a service or factory method is not right way, as because i am dealing with DOM manipulation.

is there any way where i can make common method and pass my target and run above code to avoid code duplication.

You could create a new directive just for the focus binding — Michael
– Michael, Commented Oct 27, 2015 at 13:00
FYI, your 3 lines of "code" could be minimized to just one: $(event.target).attr('tabindex', -1);. — dfsq
– dfsq, Commented Oct 27, 2015 at 13:03
@Michael: Creating directive and Injecting it on all directive ? — jsduniya
– jsduniya, Commented Oct 27, 2015 at 13:04

Hitmands · Accepted Answer · 2015-10-27 13:12:40Z

1

Normally having code-repetition in some components, like Controllers/Linking functions, isn't a bad Idea because this helps you to make every component indipendent... This is necessary when you work with DOM parts, otherwise you'll get untestable code!

If you need to share Behaviour... Angular has a Directive Concept, so, you can do what you need as angular suggests:

angular
  .module('test', [])
  .directive('scaleTabindex', function() {
    
    return function ScaleTabindexPostLink(iScope, iElement, iAttributes) {
    
      function scaleTabindex(event) {
        var index = Number(iElement.attr('tabindex'));
        
        return iElement.attr('tabindex', index - 1);
      }
      
      iElement.bind('focus', scaleTabindex);
    };
  })
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<article ng-app="test">
  <button tabindex="100" scale-tabindex>Button 1</button>
  <button tabindex="100" scale-tabindex>Button 2</button>
  <button tabindex="100" scale-tabindex>Button 3</button>
</article>

answered Oct 27, 2015 at 13:12

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jsduniya Over a year ago

Thank you I agree with your point making it component indipendent, but it is repeated many times, need to make one time.

Hitmands Over a year ago

this isn't a repetition, you need to apply the directive where you need to scale the tabindex but the BusinessLogic code is written only once... Directives are multi-instance components!

Collectives™ on Stack Overflow

How to declare Common method for multiple directive in Angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related