AngularJS с использованием ng-переключателя без обертки div

Я хотел бы использовать ng-switch, потому что мне не нужны другие элементы, которые я не хочу показывать, чтобы быть частью DOM. Вот почему я не использовал ng-hide/ng-show. В приведенном ниже примере я хотел бы иметь тег span в DOM без оберток div из ng-переключателя. Каков наилучший способ сделать это?

<div ng-switch on="user">
    <div ng-switch-when="true">
        <span>One</span>
    </div>
    <div ng-switch-when="false">
        <span>Two</span>
    </div>
</div>

Ответ 1

Вы можете использовать директиву ng-switch как пользовательский элемент и не указывать div в первую очередь. Например:

<ng-switch on="user">
  <span ng-switch-when="true">One</span>
  <span ng-switch-default>Two</span>
</ng-switch>

Вот плункер, с которым можно играть: http://plnkr.co/edit/zni6raUWOguhQh9jDiY3

Ответ 2

решение, предоставленное @ChrisAuer, все равно создает элемент упаковки. AFAIK вам придется использовать директиву custome. Вы можете использовать angular-ui if

<div ui-if="user">
    <span>One</span>
</div>
<div ui-if="!user">
    <span>Two</span>
</div>

Возможно, в вашем случае вам будет удобно использовать ng-show или ng-hide, которые только скрывают (display:none) элемент - они не удаляют его из DOM.

<div ng-show="user"> <!-- same as ng-hide="!user" -->
    <span>One</span>
</div>
<div ng-hide="user"> <!-- same as ng-show="!user" -->
    <span>Two</span>
</div>

Ответ 3

Я бы сказал, используйте ng-if, например:

<div>
    <div ng-if="user==true">
        <span>One</span>
    </div>
    <div ng-if="user==false">
        <span>Two</span>
    </div>
</div>