CODEWITHSUNDEEP
angularjstransclusionangular-directive
Daniel Leiszen
Daniel Leiszen

Reputation: 1897

Angular transcluded directive binds only for the first time

I am developing a simple inplace edit directive. My goal is to use the directive content (form) as a template, and change the input fields to labels. When the form is clicked, the directive should replace it to the original editor content.

I created a plunk. Check it HERE.

For the first time it binds its data, but does not bind them any futher.

My questions: What is wrong with my concept? How can it be fixed to attaint the expected behavior?

Any help or comment is appretiated. I am quite stuck here. Thanks.

Upvotes: 0

Views: 302

Answers (1)

Dayan Moreno Leon
Dayan Moreno Leon

Reputation: 5435

You should use ng-click in your directive instead of using onclick event handler directly that way all your changes stay in the angular event loop so juts by doing

   template: '<div class="readonly-item" ng-transclude ng-click="switchForm()"></div>',

and removing your onclick enevet handler assignment

you get this

http://plnkr.co/edit/C7xpmOxEOpwuAMB1mNpI?p=preview

you can also get the same result just by adding 

  scope.$apply()

at the end of your toggle function, i don't like this because you force angular to be aware of the operation while is not really necessary. but i works too

Upvotes: 3

Related Questions