angular 指令不在正确的位置

Question

我在 table 中有简单的 angular 指令，但它在 table 之前呈现。

app.directive('myDirective',function () {
  return {
    restrict : "E",
    templateUrl : "directives/myDirectiv.html",
    replace : true
  }
})

  <table class="table">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Deposit</th>
              <th>Credit Card</th>
            </tr>
          </thead>
          <tbody>
            <my-Directive></my-Directive>
          </tbody>
    </table>


 <!-- here is html in the directive -->

<tr>
  <td>001</td>
  <td>Danilo</td>
  <td>7163547265</td>
  <td>Visa</td>
</tr>

我怎样才能将它固定在正确的位置。提早。

Answer 1

您不能将 custom-element 放在 table 的 tbody 元素中。如果您在 tbody 内添加自定义元素，它将被视为无效 html 并且该自定义元素将被丢弃。

您应该将指令类型转换为限制为 A（属性）而不是 E（元素）。现在将您的指令放在 tbody 元素上。

指令

app.directive('myDirective',function () {
  return {
    restrict : "A", //<-- converted E to A 
    templateUrl : "directives/myDirectiv.html",
    //replace : true //it isn't needed, though this has been deprecated since 1.5+
  }
})

angular 指令不在正确的位置

angular directive is not at the right place

directive

angularjs