Angular transcluded directive binds only for the first time

Question

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.

Answer 1

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