Использование html-шаблонов в angular ng-switch

Я делаю «интерактивное меню», которое перемещается вместе с кликами пользователя. Мне интересно, есть ли способ включить html-шаблоны в ng-switch, поскольку вся логика в каждом «переключателе» разная - это приведет к огромным html-файлам.

<div class="content" ng-switch on="selection">
 <div ng-switch-when="1" >
   <h1>1</h1>
 </div>
 <div ng-switch-when="2">
   <h1>2</h1>       
 </div>
</div>

javascript html angularjs ng-switch
person Nitsan Baleli    schedule 20.11.2013    source источник

Ответы (2)


arrow_upward
19
arrow_downward

Используйте 1_:

<div class="content" ng-switch on="selection">
    <div ng-switch-when="1" >
        <ng-include src="'template1.html'"></ng-include>
    </div>
    <div ng-switch-when="2">
        <ng-include src="'template2.html'"></ng-include>
    </div>
</div>

Примечание. Не забывайте использовать одинарные кавычки, завернутые в двойные кавычки, если вы жестко кодируете путь.

person AlwaysALearner    schedule 20.11.2013
comment
+1 просто за указание на важный момент, когда нужно использовать одинарные кавычки, а также двойные кавычки. Если они не используются, шаблоны не будут отображаться. - person Devner; 24.01.2016

arrow_upward
11
arrow_downward

Вы должны сделать это с помощью директивы ng-include:

<div class="content" ng-switch on="selection">
    <ng-switch-when="1" ng-include="//TEMPLATE PATH">
    <ng-switch-when="2" ng-include="//TEMPLATE 2 PATH">
</div>
person Jérémy Dutheil    schedule 20.11.2013
comment
Это лучший ответ, так как он использует меньше разметки (ng-include и включение одного и того же элемента) - person CarbonDry; 18.07.2014
comment
Извините, моя ошибка выглядит как проблемы: github.com/angular/angular.js/ вопросы/4731 - person CarbonDry; 18.07.2014
comment
Начиная с Angular 1.2, вы не можете использовать ng-include внутри ng-switch. Если вы хотите меньше разметки, чем ответ @CodeHater, используйте ‹div ng-if=selection===1 ng-include='html/template1.html'›‹/div› - person antoine; 25.04.2015
comment
Можно ли это сделать, изменив саму директиву так, чтобы templateUrl загружался только при переключении - person ericjam; 17.09.2015
comment
Я получаю сообщение об ошибке, используя этот метод Error: [$compile:multidir] Multiple directives [ngSwitchWhen, ngInclude] asking for transclusion on: <div ng-switch-when="1" ng-include="'temp1.html'"> - person ilyo; 20.01.2016