Question

我们在工作中有一些人写的角网格，整个公司都使用它。 td-cell看起来像这样

<td typeahead-cell="location as location.Name for location in getApiLocations($viewValue, mapping)" ng-model="mapping.selectedLocation">
    {{mapping.getLocationNames()}}
</td>

typeahead-cell指令将在td上执行一些自定义代码，它所做的是连接一些代码，这样如果你双击或写入单元格，它将从显示只到（在这种情况下）typeahead 。它通过获取td单元格中的html来实现这一点（td单元格已经由angular编译），用一些自定义代码包装它，然后在整个函数上调用$ compile。这适用于上面的表达式{{mapping.getLocationNames()}}，因为它们在编译时不会改变，因此可以多次编译。

我现在面临的问题是我尝试使用ng-repeat更复杂的表达式。问题是第一次编译（直接由angular-core完成）将改变示例中的html

来自

<span ng-repeat="location in mapping.locations">...</span>

到

<!-- ngRepeat: location in mapping.locations -->

然后，当我们的自定义网格代码执行时，它将尝试编译上面的代码，这将导致为空，因为它针对html注释进行编译。

这是破解的代码

$element.html($compile(displayElement.html($element.html()))($scope));

$ element是包含我的orignal代码的td-cell，在执行$element.html()时，它将采用已编译的代码并尝试使用它。不会工作。 Displayelement是一个包装器，它将在我们处于displaymode时显示。

我要么需要对$element进行反编译，要么以某种方式移动编译和连接的$ element（td cell）的内容。

有什么想法吗？

编辑：我有点解决了这个问题，

$element.html

这将从td-cell中获取子项并将它们添加到displayElement而不会实际破坏原始$element.children().appendTo(displayElement); displayElement.appendTo($element);。 $compile无法移动jQuery.children元素，所以如果你有一个带有ng指令的表达式，比如我的repater，你需要将它包装在虚拟元素中，如

<!-- comment -->

对此有何解决方法？

Answer 1

如果您可以使用此

进行检查，则可以使用该行

//Store it first on a variable if blank
var html;
if(!html) html = displayElement.html($element.html()); 
$element.html($compile(html)($scope));

希望它能奏效。可能是您需要管理变量的范围。

Answer 2

最终解决方案是

$element.contents().appendTo(displayElement);
displayElement.appendTo($element);

使用contents而非children非常重要，因为children会忽略不包含ng-repeat指令生成的注释的文本节点。

反编译角元素

2 个答案: