How to give name for custom directive in angularjs

Question

Now i'm using camelcase directive name, like below

<code-input:text></code-input:text> (or)
<code-input-text></code-text-input>

can i use custom directice name and attribute like this,

<code-input:text dirType="text" labelHead="Code" dirName="Code" dirId="code" dirClass="form-control" dirModel="taskCreateForm.code" section-class="col col-3 required"></code-input:text>

if i give like this means , then doesn't render template from directive.because of, i have set every attribute for this is dynamically.

scope : {
            dirName : '@',
            dirType : '@',
            dirModel : '=',
            labelHead : '@',
            sectionClass : '@',
        },
template : [
                   '<section class="{{sectionClass}}">',
                   '<label class="label">{{labelHead}}</label>',
                   '<label class="input">',
                   '<input type="{{dirType}}" name="{{dirName}}" id="{{dirId}}" class="{{dirClass}}" ng-model="dirModel">',
                   '</label>',
                   '</section>'
                   ].join(''),

can anyone give me guidance..is't possible or any issue has occurred because of this.else it's not standard way?

another one question..what about custom directive attribute names..shall i give attribute name like dirName instead of dir-name in custom directive tag.? — uday s
– uday s, Commented Sep 28, 2015 at 13:23

sp00m · Accepted Answer · 2015-09-28 13:16:24Z

1

From https://docs.angularjs.org/guide/directive#normalization:

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes.

Convert the :, -, or _-delimited name to camelCase.

That is to say, code-input-text and codeInputText are equivalent and match the codeInputText directive.

answered Sep 28, 2015 at 13:16

sp00m

49k31 gold badges152 silver badges262 bronze badges

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

4 Comments

uday s Over a year ago

what about custom directive attribute names..shall i give attribute name like dirName instead of dir-name in custom directive tag.?

sp00m Over a year ago

@udays The directive name should be in camelCase, but the element/attribute name can be in the case you want, as long as it is normalized to the directive name. Angular recommends using a dash-delimited format though, i.e. code-input-text.

uday s Over a year ago

ya i know that bro..but i have doubt..i have try this to bind attribute data like <code-input-text dirData="something"></code-input-text> instead of <code-input-text dir-data="something"></code-input-text>..but it not working.

sp00m Over a year ago

@udays Please update your question with this code as well (+ the way dir-data is read), and explain what it is not working.

Arun · Accepted Answer · 2015-09-28 13:36:11Z

0

If you created custom directive like

<codeInputText></codeInputText>

You have to use

<code-input-text></code-text-input>

it is better understanding of directive.

answered Sep 28, 2015 at 13:36

Arun

1,1839 silver badges15 bronze badges

2 Comments

Arun Over a year ago

Because whole directive name itself indicator not part of directive.

uday s Over a year ago

if i use <codeInputText></codeInputText> like this, it will work or not?

Collectives™ on Stack Overflow

How to give name for custom directive in angularjs

2 Answers 2

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Related