在 Angular 指令中获取原始包含的内容

Get original transcluded content in Angular directive

本文关键字：包含 原始 获取 Angular 指令      更新时间：2023-09-26

是否可以以编程方式获取 Angular.js 指令中的原始包含内容？

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

我还想不通的：

  • 如何获取原始包含的内容以初始化文本区域

在编译函数中，$transclude似乎包含mydirective的模板，而使用控制器功能，$transclude包含更改内容、呈现指令等后的后编译内容。

您可以使用 transclude 函数：

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