得到指令角原transcluded内容 [英] Get original transcluded content in Angular directive

问题描述

是否有可能以编程方式获得Angular.js指令中的原始transcluded内容？

Is it possible to programmatically get the original transcluded content within an Angular.js directive?

我想创建一个可以添加到任何分区，允许用户编辑HTML内容自定义指令角的一个编辑指令。 （设计目标是为了避免需要增添了无穷的配置GUI功能的应用程序，因为电力用户只需编辑HTML ...），例如：

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>

请参阅本Plunker为例（<一个href=\"http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6?p=$p$pview\">http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6?p=$p$pview):

See this Plunker as an example (http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6?p=preview):

• 点击实心灰色栏上的编辑图标，打开编辑器


• 输入与标记任何组织良好的HTML：
  （例如＆LT; H1＆gt;将标题与LT; / H1＆GT;＆LT; P＆GT;有些内容与LT; / P＆GT;＆LT;时钟＆GT;＆LT; /时钟＆GT; ）


• 单击应用

我喜欢这个怎么样到目前为止：

What I like about this so far:

• 可以被添加到任何格


• 它可以包括嵌套自定义指令，通过使用$编译


• 它包括transcluded内容

我想不出尚未：

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

在编译功能， $ transclude 似乎包含了 mydirective 模板，并与控制器功能， $ transclude 包含了后期编译内容的东西已被更改后，指示渲染等。

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.

推荐答案

您可以使用transclude功能：

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
           });
       }
    };
});

这篇关于得到指令角原transcluded内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！