控制 AngularJS 如何替换 ngInclude 或自定义指令答案

【问题标题】：Controlling how AngularJS replaces ngInclude or custom directives控制 AngularJS 如何替换 ngInclude 或自定义指令
【发布时间】：2015-01-03 12:31:50
【问题描述】：

我正在学习 AngularJS，并注意到 Angular 将模板或部分 HTML 作为 ng-include 或自定义指令等 Angular 元素的子元素插入。在我的例子中，这会破坏样式，因为 Bootstrap 样式不会选择指令的子元素。所以，我相信我要么误解了如何使用指令，要么可能缺乏管理这种行为的条款。

例如：

我只想指定我的自定义指令，而不是关联特定的 HTML 类型。

输入：

<ul class="nav navbar-nav">
  <my-dropdown-messages/>
</ul>

结果：

<ul class="nav navbar-nav">
  <my-dropdown-messages>
    <li class="dropdown my-intended">content</li>
  </my-dropdown-messages>
</ul>

期望的结果：

<ul class="nav navbar-nav">
  <li my-dropdown-messages class="dropdown my-intended">content</li>
</ul>

或

<ul class="nav navbar-nav">
  <form my-dropdown-messages class="my-intended">content</form>
</ul>

是否可以配置 ng-include 或自定义指令，以便插入设置原生 html 类型，并且不将部分 html 作为 angular 指令的子项？

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

您可以使用 Attribute 指令代替 Element 指令

app.directive('myDropdownMessages', function() {
  return {
    restrict: 'A', // Attribute directive
    templateUrl: 'my-dropdown.html'
  };
});

来自 AngularJS 文档

什么时候应该使用属性而不是元素？在创建控制模板的组件时使用元素。这种情况的常见情况是当您为模板的某些部分创建域特定语言时。使用新功能装饰现有元素时使用属性。

https://docs.angularjs.org/guide/directive

【讨论】：

谢谢。我想我越来越近了。刚刚了解了 transclude，但结果仍然是原始自定义指令的子代，而不是替代品。
@MichaelPrescott 重点是你可以做到<li my-dropdown-messages>

【解决方案2】：

使用replace: true 作为您的指令

但是这个属性会在极少数需要元素替换的场景中被移除

参考directive

【讨论】：