javascript - 使用指令作为 li 元素

Question

所以我想显示来自 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 不会像其他指令一样设置样式，因为 bootstrap 由于标签而无法识别它

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

Answer 1

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

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

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