使用指令作为 li 元素答案

【问题标题】：Using a directive as li element使用指令作为 li 元素
【发布时间】：2017-08-03 00:57:35
【问题描述】：

所以我想从 Bootstrap 显示一个下拉菜单：http://getbootstrap.com/components/#dropdowns

但是我的 li 元素中只有一个是包含 li 的指令：

 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <my-directive></my-directive>
</ul>

my-directive 的 html 模板和其他的一样是一个简单的 li 标签：

      <li><a href="#">Directivelink</a></li>

但是，当我这样做时，我的指令中的 li 不会像其他指令一样被设置样式，因为引导程序由于标签而无法识别它

我该如何解决这个问题，或者有什么可能？由于额外的逻辑，我需要将 li 封装在指令中。

【问题讨论】：

在像<li my-directive这样的元素上使用属性选择器[my-directive]
是Angular 还是AngularJS 问题？
@JeanJacques AngularJS，但是我可以想象在 Angular 中也有类似的问题
指令上的replace 选项也可能有用
同意@reptilicus，replace: true 在你的指令中将导致一个只包含 UL 和 LI 的 DOM 结构，因此引导程序将能够正常设置样式。不推荐使用替换（请参阅此处：stackoverflow.com/questions/24194972/…），但我仍然不时使用它而没有问题。

标签： javascript html css angularjs angularjs-directive

【解决方案1】：

在指令上使用replace 选项，例如：

app.directive('myListItem', function(){
  return {
    template: '<li>directive template1</li>',
    replace: true
  }
});

这样，插入到 DOM 中的 html 将被模板中的任何内容替换。

【讨论】：