Get original transcluded content in Angular directive

Question

Is it possible to programmatically get the original transcluded content within an Angular.js directive?

I'm trying to create an an editable directive which can be added to any div, allowing the user to edit the HTML content with custom angular directives. (The design goal is to avoid the need to add infinite configuration GUI features in the app, as power users can just edit the HTML...), e.g.:

 <div editable>
      <h1>Lorem Ipsem</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <clock>A custom directive</clock>
 </div>

See this Plunker as an example (http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6?p=preview):

• Click the edit icon on the solid grey bar to open the editor
• Enter in any well formed HTML with tags: (e.g. <h1>A title</h1><p>some content</p><clock></clock>)
• Click "Apply"

What I like about this so far:

• It can be added to any div
• It can include nested custom directives, by using $compile
• It includes the transcluded content

What I can't figure out yet:

• How to get the raw transcluded content to initialize the textarea

Within the compile function, $transclude seems to contain the template for mydirective, and with the controller function, $transclude contains the post-compiled content after things have been changed, directives rendered, etc.

Answer 1

You can use transclude function:

.directive('editable', function() {
    return {
       transclude: true,
       link: function(scope, element, attrs, ctrl, transclude) {
           transclude(scope, function(clone) {
               // clone is your transluded content
           });
       }
    };
});