Question

我有一个简单的指令，用一些模板HTML替换指令标记。 HTML包括<div>，其Bootstrap类为“clearfix”（即<div class="clearfix">）。当<div>是模板HTML的一部分时，一切正常;但是，当<div>围绕指令标记时，不会呈现模板HTML。

这项工作：

<div class="panel-body">
  <pr-details pr="selectedPr"></pr-details>

  <!-- Additional unaffected content -->
</div>

return {
  restrict: 'E',
  replace: 'true',
  scope: {pr: '=' },
  template:
    "<div class='clearfix'>\n" +
    "  <div class='pull-right'>\n" +
    "    <!-- floated content -->\n" +
    "  </div>\n" +
    "  <div>\n" +
    "    <!-- non-floated content -->\n" +
    "  </div>\n" +
    "</div>\n"
};

这就是“工作：

<div class="panel-body">
  <div class="clearfix">
    <pr-details pr="selectedPr"></pr-details>
  </div>

  <!-- Additional unaffected content -->
</div>


return {
  restrict: 'E',
  replace: 'true',
  scope: {pr: '=' },
  template:
    "<div class='pull-right'>\n" +
    "  <!-- floated content -->\n" +
    "</div>\n" +
    "<div>\n" +
    "  <!-- non-floated content -->\n" +
    "</div>\n" +
};

我唯一可以理解的是，在父“clearfix”<pr-details>和子项“pull-right”<div>之间使用<div>标记会干扰父母 - Bootstrap“clearfix”实现的子关系。

任何人都可以对此有所了解吗？有没有办法让这两件事情一起工作？我可以通过重构HTML来完成这项工作，但我很好奇这样做以备将来使用。

AngularJS指令如何与Bootstrap clearfix类交互？

0 个答案: