14

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.

prototype
  • 7,249
  • 15
  • 60
  • 94
  • 2
    isn't the content coming from scope? If so pass that as attribute into nested directives. A demo would help. Or do your own `$compile` on first directive...hard to answer without seeing more directive code – charlietfl Nov 17 '13 at 15:38
  • As @charlietfl suggested, a demo of what you already have, will give us more info to help – dimirc Nov 17 '13 at 16:04
  • @charlietfl -- You're absolutely right, created a Plunker. The short question now is how to pre-populate the text area with the original (raw, precompiled) transcluded content, so the user is editing it, not retyping it. – prototype Nov 18 '13 at 03:53
  • 1
    still looking at it wrong...if data is in scope variable...use `ng-model` to bind to a textarea, input, select etc – charlietfl Nov 18 '13 at 04:02
  • @charlietfl -- Very helpful. I've rewritten the plunker and question, narrowing it down to a specific issue about getting the html vs the text of the transcluded content. http://stackoverflow.com/questions/20102059/get-original-transcluded-content-within-angular-directive – prototype Nov 20 '13 at 16:58

1 Answers1

6

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
           });
       }
    };
});
Jérôme Beau
  • 10,608
  • 5
  • 48
  • 52
jcubic
  • 61,973
  • 54
  • 229
  • 402
  • 2
    I believe you need to add one more argument before transclude as in this plunkr: http://jsfiddle.net/dirakkk/26Lejxg2/1/ – sq1020 Dec 09 '14 at 23:04