javascript - Get original transcluded content in Angular directive - Stack Overflow

admin管理员组

文章数量:1293739

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 ():

• 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 $pile
• 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 pile function, $transclude seems to contain the template for mydirective, and with the controller function, $transclude contains the post-piled content after things have been changed, directives rendered, etc.

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 $pile
• 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 pile function, $transclude seems to contain the template for mydirective, and with the controller function, $transclude contains the post-piled content after things have been changed, directives rendered, etc.

• javascript
• angularjs
• angularjs-directive

Share Improve this question Follow edited Nov 18, 2013 at 3:51 prototype asked Nov 17, 2013 at 15:16 prototypeprototype 7,9651515 gold badges6666 silver badges100100 bronze badges 5

• 2 isn't the content ing from scope? If so pass that as attribute into nested directives. A demo would help. Or do your own $pile on first directive...hard to answer without seeing more directive code – charlietfl Commented Nov 17, 2013 at 15:38
• As @charlietfl suggested, a demo of what you already have, will give us more info to help – dimirc Commented Nov 17, 2013 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, prepiled) transcluded content, so the user is editing it, not retyping it. – prototype Commented Nov 18, 2013 at 3: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 Commented Nov 18, 2013 at 4: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. stackoverflow./questions/20102059/… – prototype Commented Nov 20, 2013 at 16:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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
           });
       }
    };
});

本文标签： javascriptGet original transcluded content in Angular directiveStack Overflow