How to compile directive manually?

Question

I have this code

<input type="text" name="firstName" ng-model="data.firstName" required>

But I want to make a directive to simplify it like this

<my-field name="firstName"></my-field>

Here is my plnkr link: http://plnkr.co/edit/XYk5MmE3YzKxvAHQgoZp?p=preview

Two questions 1. How to make my field work like the original input 2. Is it possible to use the template property in this case?

Thanks

Answer 1

check this PLUNKER...

you can define your directive variables as you want, here I just use myFieldVar to pass variable to your directive, you don't care about variable name in scope as you see in template

I use ng-model="myFieldVar" so whatever scope variable you bind to my-field-var in html you can use it with that name...

UPDATE

If you do not want to use new scope then add scope : true to your directive options but in this case you are only doing replace your directive tag with your template...

here is updated PLUNKER

Answer 2

I've solved it myself: http://plnkr.co/edit/XYk5MmE3YzKxvAHQgoZp?p=preview

I added manually the name and ng-model attributes and then I recompiled the element.

Answer 3

In your code, you don't have to do a custom compile just to set the model values.

For getting values like ng-model, you can require ngModel in your custom directive.

An example implementation using ngModel is the date picker directive

https://github.com/angular-ui/ui-date