Using a directive as li element

Question

So I want to display a Dropdown menu from Bootstrap: http://getbootstrap.com/components/#dropdowns

However ony of my li elements is a directive containing a 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>

The html template of my-directive is a simple li tag as the others:

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

However when I do it like this, the li inside my directive won't get styled as the other ones, since bootstrap doesn't recognize it due to the tags

How can I fix this, or what would be a possibility? I need to encapsulate the li inside a directive, because of additional logic.

@JeanJacques AngularJS, however I can imagine there's a similar problem in Angular — user5417542, Aug 02 '17 at 15:05
Agree with @reptilicus, replace: true in your directive will result in a DOM structure that contains only UL and LI's, therefore bootstrap will be able to style as normal. Replace is deprecated (see here: https://stackoverflow.com/questions/24194972/why-is-replace-deprecated-in-angularjs) but I still use it from time to time without issues. — flyer, Aug 02 '17 at 15:17

score 0 · Answer 1 · answered Aug 02 '17 at 15:26

Use the replace option on the directive, something like:

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

That way, the html that gets inserted into the DOM is replaced by whatever is in the template.

Using a directive as li element

1 Answers1