Question

我有下表：

<table>
  <thead>
    <tr>
      <th>Uno</th>
      <th>Dos</th>
    </tr>
  </thead>

  <!--directive template should be here-->
  <double-rows></double-rows>
  <!--/directive template should be here-->

</table>

该指令定义为：

angular.module('app', []);

angular.module('app').directive('doubleRows', function () {
  return {
    templateUrl: 'template.html',
    restrict: 'E',
    scope: {
      row: '='
    }
  }
});

看起来很简单，它没有正确呈现。 e.g：

<double-rows class="ng-isolate-scope">

Cell1
Cell2

</double-rows>

<table>
  <thead>
    <tr>
      <th>Uno</th>
      <th>Dos</th>
    </tr>
  </thead>

  <!--directive template should be here-->

  <!--/directive template should be here-->

</table>

您可以在此处查看完整代码：https://plnkr.co/edit/0Z65aK?p=preview

如何让它发挥作用？

Answer 1

这不是一个角度问题，而是与浏览器决定如何解释您编写的HTML有关。某些标签不允许嵌套在其他标签中，这在列表（ul或li）和表格中尤为普遍（也适用于嵌套链接和其他一些内容）。

如果您使用限制A并使用表中允许的元素类型，那么它可以工作（我也在您的指令上使用了replace：true，而不是使用限制E，因此它替换了它应用于的原始元素而不是它的孩子）

https://plnkr.co/edit/fgRzZU?p=preview

angular.module('app').directive('doubleRows', function () {
  return {
    templateUrl: 'template.html',
    restrict: 'A',
    replace:true,
    scope: {
      row: '='
    },
    controller: function () {
      console.log('hi');
    }
  }
});

HTML

<table>
  <thead>
    <tr>
      <th>Uno</th>
      <th>Dos</th>
    </tr>
  </thead>

  <!--directive template should be here-->
  <tbody double-rows>
  </tbody>
  <!--/directive template should be here-->

</table>

Angular指令不适用于表

1 个答案: