Carry over attributes from directive to sub-element

Question

I've got a directive that renders a simple searchbox - its HTML looks as follows:

<div class="search input-group"> <input type="text" ng-model="text" ng-change="onChange()" placeholder="Search here..." class="form-control"> <span class="input-group-btn"> <button class="btn btn-default glyphicon glyphicon-search"></button> </span> </div>

All is well and working, I'm able to use it like this:

<searchbox ng-model="search" />

However, now I would like the searchbox to have autofocus in some cases, and in some cases not, for that, it would be neat to just be able to do:

<searchbox ng-model="search" autofocus />

and have that result in having the autofocus attribute carried over to the <input> tag within the directive. Is this possible? How would I go about doing that? Is there a way to carry over specific attributes over to a specific sub-element?

Nikos Paraskevopoulos · Accepted Answer · 2014-12-29 10:25:06Z

This is a way: from your directive's link function, read the autofocus attribute and, if it is defined, write it to the <input> using DOM manipulation. (DOM manipulation is OK inside the link function):

 link: function(scope,elem,attrs) { if( angular.isDefined(attrs.autofocus) ) { var inp = elem[0].querySelectorAll('input'); inp[0].setAttribute('autofocus','autofocus'); } }

A fiddle demonstrating the principle: http://jsfiddle.net/5yhp2xa0/

Possible catch: I am not sure if HTML's autofocus would work for templates that are inserted to the page "later" (i.e. after Angular route change, when a ng-if is shown etc). If this is the case, then a different solution should be used (could be easy, just call inp[0].focus() instead of inp[0].setAttribute('autofocus','autofocus');).

Since the title of the question is "Carry over attributes from directive to sub-element", let me address the general issue as well:

Attributes are not transferred automatically
If the attribute is non-directive, then techniques similar to the answer above can be used, i.e. manipulate the DOM from the link function. Things can get more complex if the attribute value is dynamic, but the general idea is the same.
If the attribute is a directive things are more difficult. Most probably you will have to use the compile function and manipulate the template of the DOM. In this case however, I would prefer to make the directives cooperate directly using the require configuration, especially with the optional modifier, e.g. require: '?otherAttributeDirective'. Of course this is possible only if you control both directives.

ahmad rabbani · Accepted Answer · 2014-12-29 10:02:29Z

You can use the tab index. I m listing some of the behaviors of tab index as under

The tabindex value can allow for some interesting behaviors .

If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()). If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document. Values greater than 0 create a priority level with 1 being the most important.

Or you can use following javascript code for that.

document.getElementById('txtId').focus();

Peter Ashwell · Accepted Answer · 2014-12-29 10:14:07Z

I would do that programmatically. It feels like you are asking too much of angular to carry the attributes in automatically. The attributes of the directive are available as arguments to the link and compile functions, it should be easy to use the directive template to apply the attribute inside when it's on the outside.

For example, try this:

... directive code link: function(scope, elem, attrs) { console.log(attrs.autofocus); }

You can check the value of autofocus from the attrs like that

Collectives™ on Stack Overflow

Carry over attributes from directive to sub-element

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related