在Angular指令中获取原始的被转换内容

Question

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

我正在尝试创建一个editable可以添加到任何div 的指令,允许用户使用自定义角度指令编辑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
• 它包括被抄送的内容

我还想不通的是:

• 如何获取原始的transcluded内容来初始化textarea

在编译函数中,$transclude似乎包含模板mydirective,并且包含控制器函数,$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
           });
       }
    };
});