javascript - 在 Angular 指令中获取原始嵌入的内容

Question

是否有可能以编程方式在 Angular.js 指令中获取原始嵌入的内容？

我正在尝试创建一个 editable可以添加到任何 div 的指令，允许用户使用自定义 Angular Directive(指令)编辑 HTML 内容。 (设计目标是避免在应用程序中添加无限配置 GUI 功能，因为高级用户只需编辑 HTML...)，例如:

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

以这个 Plunker 为例(http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6?p=preview):

• 点击灰色实心条上的编辑图标打开编辑器
• 输入任何格式正确的带有标签的 HTML: (例如 <h1>A title</h1><p>some content</p><clock></clock>)
• 点击“应用”

到目前为止，我喜欢它的地方:

• 它可以添加到任何div
• 它可以包含嵌套的自定义指令，通过使用 $compile
• 它包括嵌入的内容

我还不明白的是:

• 如何获取原始嵌入内容来初始化textarea

在编译函数中，$transclude似乎包含 mydirective 的模板，以及 Controller 功能，$transclude包含更改后的编译后内容、呈现的指令等。

Answer 1

你可以使用transclude函数:

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