angularjs attribute name not compiled

Question

I'm trying to generate an attribute name like this :

name="id{{myScopeId}}"

This perfectly works on most cases, but when I do this on an element which already have a custom directive, it doesn't work anymore, and the result is only "id".

This custom directive applies on a file input element and handles the file name.

This will work, and result is

name="file5" : <input name="file{{myId}}" type="file" />

This won't work, result is

name="file" : <input name="file{{myId}}" type="file" file-handler="fileName" />

Here's the jsfiddle with example : http://jsfiddle.net/gubrb/1/

You'll need firebug or similar to see generated attribute name.

Thanks for any help

Chandermani · Accepted Answer · 2013-05-11 13:43:53Z

1

The problem lies with your directive definition. As i look at you directive definition, the definition of scope property as object hash creates a new Isolated scope. As per directive documentation,

{} (object hash) - then a new 'isolate' scope is created. The 'isolate' scope differs from normal scope in that it does not prototypically inherit from the parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope.

Since in your case you are using object hash, a new scope gets created for the html element which does not inherit from the parent scope.

I have created a new fiddle that fixes this problem by creating a 2 way binding between the parent scope property and directive isolated scope property. See the fiddle in action here http://jsfiddle.net/FhM2c/2/

Some relevant part of the fiddle are

 <input name="file{{myId}}" type="file" file-handler="fileName" file="myId"/><br />

and the directive

 scope : {
            fileHandler : '=',
            myId:'=file'
        },

answered May 11, 2013 at 13:43

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

1 Comment

codename44 Over a year ago

Thanks a lot for this answer. It seems obvious now but I wouldn't be able to find out

Collectives™ on Stack Overflow

angularjs attribute name not compiled

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related