指令内容在换行之前呈现 html

Question

我是 AngularJS 的新手，现在我写了我的第一个指令。该指令表示 table 行，标记如下所示：

<table>
  <!--thead ...-->
  <tbody>
    <my-directive ng-repeat="(key, value) in object"></my-directive>
  </tbody>
</table>

但是指令在周围的 table 标签之前呈现/打印出来。所以我的 DOM 看起来像这样：

<!-- multiple times -->
<my-directive></my-directive>

<table>...</table>

这是我的指令定义

return {
    restrict: "E",
    templateUrl: "/my-directive.html",
    link: function(scope, element, attrs){

    }
};

那么为什么会这样呢？

Answer 1

除了 tr、td、tbody、th 元素永远不会在 table 元素内工作。您应该真正使用属性指令，以便它可以通过在指令中执行 restrict: "A", 来支持 table 内部。

<tbody my-directive ng-repeat="(key, value) in object">

</tbody>

如果你想让 table 以外的元素存在，那么它们可以放在 th & td

中

Answer 2

有点像 Pankaj 所说的那样，您不能从 table 内部调用指令，它无效 HTML。但是，我可以理解您为什么要使用 restrict: 'E'。就个人而言，我喜欢使用我的指令作为元素。

因此，如果您仍想将该指令用作 HTML 元素，最简单的解决方法是让您的指令本身呈现整个 table。它可以是 <table-for/> 指令，或类似的东西。

这是我解决此问题的方法。标记归根结底是标记，您仍然必须遵守规则。

Answer 3

所以我得出以下方法：

<tbody>
  <tr my-directive ng-repeat="..."></tr>
</tbody>

而且我将我的指令限制为参数并且它起作用了。感谢您的帮助。

Directive contents are rendered before wrapping html