databinding custom directive angular with replacing html in compile function

Question

i am trying to write a directive that replaces an input field with an custom made input field. However, I can not get the databinding to work as the model does not show in the directive input field.

I have created a jsFiddle here:

http://jsfiddle.net/6HcGS/392/

I guess i dont really know what to place here for the databinding to work:

tElement.replaceWith('<input ng-model="ngModel" type="text" />');

If anybody could help me out i would be very grateful as this has been a problem for me for a whole day now.

Cheers!

bekite · Accepted Answer · 2013-10-25 21:39:01Z

1

tElement.replaceWith('<input ng-model="ngModel" type="text" />');

Angularjs doesn't know that ngModel is a binding. It's interpreted as a simple string. So you need to tell angular this. I've updated your jsfiddle to show you how to do this: http://jsfiddle.net/6HcGS/393/

But you can do it even simpler by removing the isolated scope in the directive: http://jsfiddle.net/6HcGS/394/.

Like lort already mentioned the attributes are getting passed to the element during replacement. Of course only if you dont use isolated scope.

answered Oct 25, 2013 at 21:39

bekite

3,4442 gold badges26 silver badges31 bronze badges

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

5 Comments

Wouter Willems Over a year ago

Thnx a lot for that first fiddle! Looks exactly what i need. One question though, can it be a problem that we moved the creation of the template to the linking function? Does it have any consequences?

bekite Over a year ago

There could be performance issues. The linking function is called for every zippy directive. The compile function is only called once. If you simply want to modify the dom, do it in the compile function. But if you need some behaviour dependant changes do it in the linking function. To put it simple: If you need to access the scope you need to do it in the linking function.

Wouter Willems Over a year ago

Now I want to access the ngModel controller (to later use setValidity to validate the custom input field). However, when I want to use the directive as an attribute (not class), the replaceWith function throws an error that It can not find ngModel controller. I created a fiddle here: jsfiddle.net/6HcGS/396

bekite Over a year ago

I would recommend asking a new question. So users having the same problem can find a solution.

Wouter Willems Over a year ago

I posted the question here: stackoverflow.com/questions/19605882/…

lort · Accepted Answer · 2013-10-25 19:28:51Z

0

I don't understand what you're trying to do but it seems that following code example is all you need:

angular.module('zippyModule', [])
.directive('zippy', function(){
    return {
      restrict: 'C',
      replace: true,
      template: '<textarea></textarea>',
    }
});

This one changes initial input into textarea. Binding through ng-model still works because other attributes are not deleted from element during replacement.

edited Oct 25, 2013 at 19:28

answered Oct 25, 2013 at 19:19

lort

1,45612 silver badges16 bronze badges

2 Comments

Wouter Willems Over a year ago

Hi, thanks but i dont want to use a template or textarea. I want to create a template myself in the compile function.

lort Over a year ago

Textarea was only an example. What do you mean by "create a template myself", how it differs from using template option?

Collectives™ on Stack Overflow

databinding custom directive angular with replacing html in compile function

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related