CODEWITHSUNDEEP
angularjscompilationattributesdirective
codename44
codename44

Reputation: 887

angularjs attribute name not compiled

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

Upvotes: 0

Views: 171

Answers (1)

Chandermani
Chandermani

Reputation: 42669

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'
        },

Upvotes: 1

Related Questions