How to target an element with dynamic id in directive ?

[Evgeni]

I have a directive, which has a template containing element with generated id (like template: "<div> <label>{{Field.Name}} <div id='{{Field.Name}}_Container'></div> </label></div>"), and I can'd figure out how to target that container div.

I've tried to compile element passed in to the link function, but that doesn't work for whatever reason.

Any ideas ?

Here's a fiddle. I can target that element using angular.element("div", elem), but on a more complex template this may not work, and using id is cleaner, imo.

[Peter Bacon Darwin]

One question is why do you want to target this did? What are you going to do with it? One pattern I am starting to notice is putting a new directive on things like this and using a directive controller to coordinate between the inner and outer directives.

Pete
...from my mobile.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Evgeni]

Basically I want to generate a form based on field description/metadata. This directive will make a single field, and I need that div to inject generated html into it.

[Peter Bacon Darwin]

In general using ids are fragile anyway since it is not always possible to ensure that they are unique.  How about a CSS class, that will be guaranteed to be unique within the directive's template?

Alternatively, can you provide a different template each time for different fields?  I did something like this once using ng-include to select the required template,

Pete

[Evgeni]

Yeah, I can target it by class or an attribute, but Id seems cleaner in this case.

I can pretty much guarantee the id will be unique.

Using includes for every case would mean a lot of combinations (type/maxlength/required/etc), so not really an option.
What makes me wonder, though, is why I can't $compile that element passed in to the link function? I thought that would work.. and it doesn't.

[Peter Bacon Darwin]

OK so the problem is that the template has not been updated when the link function is run, so although it eventually gets the correct string in the id, this is not available during the link function.

You can see this in the console here: http://jsfiddle.net/amt45/.  The html at link time is showing the {{}} but the eventual div contains the correct id.

One option could be to provide a controller on your myDirective function, then have a new directive on the div that will contain the input.  This new directive will simply "require" the myDirective and then hand over a reference to its element.

See http://jsfiddle.net/5keEN/.  To be honest, this is much more the Angular Way, since it gets away from "knowing" about the DOM.

Pete

[Evgeni]

This is good!

I need to dig into documentation a little deeper :)

Thank you!!