Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get original transcluded content in Angular directive

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.

like image 688
prototype Avatar asked Nov 17 '13 15:11

prototype


1 Answers

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
           });
       }
    };
});
like image 147
jcubic Avatar answered Nov 15 '22 07:11

jcubic