Custom directive to dynamically set HTML based on data

[Jeff Wilson]

I'm new to AngularJS and somewhat of a JavaScript amateur as well.

I'm have a need to change the contents of a table cell based on the data in the model. My model includes some metadata about a piece of data, and I want to read the metadata and dynamically set the cell based on that data. 

For example, if the metadata looks like "{ type: 'text', value: 'Foo' }" the contents of the cell should be a text input field, with the content of the field set to "Foo". If the user edits the cell, perhaps to set it to "Bar", I'd like to update the metadata accordingly (i.e., the new data looks like "{ type: 'text', value: 'Bar' }".

Likewise, if the metadata is "{ type: 'select', choices: ['A', 'B', 'C'], value: 'B' }" then I want the cell to contain a 'select' element with the values 'A', 'B', 'C' and the current selection of 'B', along with the appropriate angular data binding.

I'm having trouble figuring how to make this work. I have a plunker of this here.

This almost works but the binding is not working.

Any suggestions on how to make this approach work, or a description of a better approach, is welcome!

[Kamal]

Jeff,

Here is an update off your plnkr http://plnkr.co/edit/ZgHcZi?p=preview, working as needed. The only thing to remember is when ever your are creating an new element for which you have bound angular directives, scope, any thing with angular you need to compile it using $compile service for it to work.

Regards,

Kamal

[Jeff Wilson]

Thanks, Kamal! And I really like the refactor you did to remove the if-else-if statements.

Question on JavaScript style and Angular scoping - why define the editorTypes object outside of the scope of the module? I typically would either define it inside the module, if that is the only place it was going to be used, or I would define it in its own module and set up a dependency on that module in this one. I guess I don't like to 'pollute' the global name space.

[Kamalakar Gadireddy]

Jeff,

I usually use an decorator function to wrap my code in, as this was an example i left it in the open. As far as why the `editorTypes` is outside the linker goes because the linker gets invoked for every directive instance we have, hence having it inside would make memory allocation for every call & if a reference is held by an nested function its not gc until all of the references are cleared. Simply to say to ease some memory.

Regards,
Kamalakar Gadireddy

Twitter: https://twitter.com/kamalakarg

GitHub: https://github.com/gKodes

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/VOupWfQwp14/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.