Using ng-switch as tag breaks css

Question

Using ng-switch as tag breaks css

I have the following:

<li ng-repeat="breadcrumb in breadcrumbsService.getAll()">
  <ng-switch on="$last">
    <a ng-switch-when="true" href="#">{{breadcrumb.name}}</a>
    <a ng-switch-default href="#{{breadcrumb.path}}">{{breadcrumb.name}}</a>
  </ng-switch>
</li>

But this breaks my css (bootstrap), since it sometimes uses direct descendant selectors (example):

ul > li > a {
 ....
}

The css would have to be refactored to ul li a { //... }

Is there a workaround for this? I'd like to tell angular NOT to generate tags for directives, if it's possible.

angularjs

Answer 1

You can use ng-switch as an attribute instead of an element. See this demo: http://plnkr.co/edit/nKiCn8?p=preview.

<li ng-repeat="breadcrumb in breadcrumbs" ng-switch="breadcrumb.path">
    <a ng-switch-when="/c" href="#">{{breadcrumb.name}}</a>
    <a ng-switch-default href="#{{breadcrumb.path}}">{{breadcrumb.name}} - default</a>
</li>