Angular nested directives with isolate scope - form input

Question

I am trying to get to grips with directives and am struggling with one aspect. The expression in the form input element of a directive is not being evaluated when used in an attribute which is also a directive.

Consider this element which is part of the directives HTML,

<input name="atin" type="text" ng-model="model" required="{{req}}" random-attribute="{{req}}"/>

Assuming the value of the attribute value "req" (passed in via an isolate scope attribute) is "true", then when the directive has been compiled/linked the resultant HTML (when you view the source) is

<input name="atin" type="text" ng-model="model" required="{{req}}" random-attribute="true"/>

I.e. it has only been substituted in the "random-attribute", but not the "required" attribute. I am guessing this has something to do with the fact that the required attribute is itself a directive.

Here is a plunkr which demonstrates it

http://plnkr.co/edit/sq5lpbKqjyV9mCOwSBTo

I do know of one solution which involves adding the input elements attributes during the compile stage of the atInput directive, but I would like to know why this current solution does not work and what is the best way to solve this problem.

Thanks

James Thurley · Accepted Answer · 2015-02-27 16:31:23Z

0

Sounds like you might need to do ng-required="req" instead of required="{{req}}"...

answered Feb 27, 2015 at 16:31

James Thurley

2,97032 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Angular nested directives with isolate scope - form input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related