从动态html编译Angular指令

我似乎无法完成这项工作：我有一个由ng-repeat编译的HTML，我也想编译这个结果。我会怎么做呢？从动态html编译Angular指令

我有一个包含文本块的数据集，它已经被赋予了显示类型。这种类型被设置为跨度类。大多数类型只是触发CSS规则（例如，评论式框，见截图），但其他类型应该调用指令。例如，包含'命名Nicodemus'的块是类型隐藏的。我有一个指令可以折叠块并插入一个小按钮来扩展它。

代码：

<span class="chunk type-{{chunk.type}}" ng-repeat="chunk in verse.chunks">{{chunk.text}}</span>

结果类似

<span class="chunk type-hidden">named Nicodemus, </span>

如果第二个会是我的HTML源文件，它将编译typeHidden指令就好了。我想我需要找到一种方法来进行角度编译第二次。我似乎无法使用$ compile完成它（尽管我想我不太明白这是如何工作的）。

希望你能帮助！

提前感谢！

来源

2015-09-18 Jurgen

你想完成什么？ Angular会自动地在ng-repeat中“编译”指令，通常不需要明确地告诉它将其递减到较低的级别。也许如果你告诉我们关于你的'typeA'指令想要做什么的一些事情，你会问什么更清楚？ –

真的没什么特别。它隐藏了内容并添加了一个小按钮使其再次可见。它看起来好像不认为type-a是需要编译为指令的东西。 – Jurgen

只要添加一个'type-a'类并不会自动使它成为一个指令。事实上，你需要编译。但是，你能解释一下为什么你需要这个动态指令吗？你不能使用一个通用的指令，其行为有所不同，取决于它的类型？为了避免XY问题，你能解释一下（在问题的正文中）你正在努力完成什么？有可能是更自然的方式来做到这一点 –

Here's a plunker显示如何获得指令来编译元素，然后再次。

对于懒人代码：

angular 
    .module('App') 
    .directive('compileTwice', compileTwiceFactory); 

function compileTwiceFactory($compile) { 

    return { 
     restrict: 'AE', // Whatever you want 
     terminal: true, // Angular should not keep compiling the element 
          // by itself after encountering this directive! 
     compile: compile, // Instead, we tell Angular how to compile the rest of the element 
     priority: 1001, // This directive should get compiled before the others, obviously 
    }; 

    function compile(element, attrs) { 
     element.removeAttr('compile-twice'); 
     element.removeAttr('data-compile-twice'); 

     return function postLink(scope, _element, _attrs) { 
      var compiledTwice = $compile($compile(_element)(scope)[0])(scope)[0]; 
      // do something with compiledTwice 
     }; 
    } 

}

编辑：很显然，你能大概在编译的任意次数，你可以指定如下：

<div compile-n-times="420"></div>

编辑：蹲下似乎没有在Firefox下工作？

来源

2015-09-19 11:25:03 jrsala

看起来很有希望，但我似乎无法得到它的工作，可能是因为我的元素是一个ng-repeat元素。 $ compile（_element）（scope）[0]返回<！ - ngRepeat：chunk in verse.chunks - >而不是元素HTML – Jurgen

在你的活动中，看看使用

abcdef

– Jurgen

@Jurgen会发生什么哦，那是因为角指令编译为注释+实际编译的元素。如果你检查一个使用角度的页面的标记，你会看到那些'<！ - ng-if =“...” - >'和'<！ - ng-repeat =“...” - >'无处不在的评论（除非可能有禁用它们的选项？）。所以是的，而不是做'[0]'，当指令的行为像你期望的那样并且只输出编译后的元素时，你应该在数组中寻找你需要的实际元素，最重要的是通过标签名称。简单。 – jrsala

我实际上已经能够解决这个问题。不够优雅，但是如果我在ngrepeat中嵌套我的指令并对其名称进行硬编码，则可以使用ng-if使其可见。

<!-- special type hidden --> 
     <span ng-if="chunk.type=='hidden'"> 
     <span class="type-hidden"> 
      {{chunk.text}} 
     </span> 
     </span>

来源

2015-09-19 20:09:22 Jurgen

从动态html编译Angular指令

回答

相关问题