Динамически загружать шаблоны (частичные) в Angular.js

Я пытаюсь загрузить шаблон в Угловое приложение в зависимости от параметра. Было бы внутри нг-Еогеасп:Динамически загружать шаблоны (частичные) в Angular.js

<body ng-app="MyApp" ng-controller="ExampleController as example"> 
    <div ng-repeat="item in example.items" class="someClass" ng-switch="item.type"> 
     <!-- load a different template (partial) depending on the value of item.type --> 
    </div> 
</body>

Fiddle:https://jsfiddle.net/rsvmar2n/1/

Могу ли я как-то сделать? Я думал об использовании ng-switch: https://jsfiddle.net/rsvmar2n/6/

Но я уверен, что есть более угловатый способ сделать это.

Edit: Я хотел бы не делать запрос HTTP для каждого частичного я бы загрузить (и я думаю, что ngInclude делает это

Edit2:.. Закончились с использованием нг-включают и кэшированных шаблоныhttps://jsfiddle.net/rsvmar2n/24/

источник

2016-01-13 Astaroth

насчет 'ngInclude'? – maurycy

Да. Я думал об этом, но мне непонятно, как это работает (магия угловой документации). Должен ли я выставить с моего сервера некоторые HTML-файлы, а затем загрузить их с помощью ngInclude? Можете ли вы привести пример кода? Я бы хотел, чтобы НЕ выполнял HTTP-запрос для каждой частичной загрузки (и я думаю, что ngInclude делает это). – Astaroth

вы можете использовать 'ng-include' над' $ templatecache' – nada

Вы можете вызвать функцию, которая возвращает идентификатор шаблона в ng-include и использовать кешированные шаблоны. Рабочий example показывает, что вы можете сделать.

функция в контроллере, который обрабатывает шаблон выглядит следующим образом:

$scope.getTemplate = function(item) { 
    switch(item.type) 
    { 
    case "type1": 
     return 'testtype1.html'; 
    default: 
     return 'testtype2.html'; 
    } 
}

и ваш HTML

<script type="text/ng-template" id="testtype1.html"> 
    <p>This is the template 1</p> 
</script> 

<script type="text/ng-template" id="testtype2.html"> 
    <p>This is the template 2</p> 
</script> 

<body ng-app="MyApp" ng-controller="ExampleController"> 
    <div ng-repeat="item in items" class="someClass"> 
    <!-- load a different template (partial) depending on the value of item.type --> 
    <div ng-include="getTemplate(item)"></div> 
    </div> 
</body>

источник

2016-01-13 12:35:14

Вот что я закончил делать: https://jsfiddle.net/rsvmar2n/24/ – Astaroth

Создать директиву для того, что-то вроде:

app.directive('myDirective', function(){ 
    return { 
    restrict: 'E', 
    scope: {item: '=item'}, 
    templateUrl: function(element, attrs){ 
     if (!attrs.type) return 'default.html'; 
     return attrs.type + 'html'; 
    } 
    } 
});

Затем вы можете создавать различные шаблоны, как type1.html, type2.html ...

И в контроллер просто сделать:

<my-directive ng-repeat="item in items" item="item", type="item.type">

источник

2016-01-13 12:08:21

Я закончил делать что-то вроде этого: https://jsfiddle.net/rsvmar2n/ 22/ – Astaroth

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

С нг-переключатель

ng-if="item.type=='type2'||item.type=='type3'"

LoadMultipleTemplate Чтобы загружать несколько шаблонов на основе выбранных параметров.

LoadSingleTemplate load одиночный шаблон.

Редактировать

С нг-включают, таким образом, вы можете загрузить динамические представления.

В этом примере я не поставил никаких условий. но внутри ng-repeat вы можете поместить еще один ng-repeat и на основе внутреннего ng-repeat вы можете сделать материал. Но для внутреннего ng-repeat вам придется сделать соответствующий json-объект.

loadViews

<div ng-repeat="item in example.items" class="someClass" > 

     <ng-include src="item.type + '.html'">{{item.type}}</ng-include> 

</div>

источник

2016-01-13 12:12:19 micronyks

Использование нг-включать позволяет динамически назначать источник - так в вашем родительском шаблоне вы можете иметь

<div ng-include src="templateName"></div>

где TemplateName имя переменной в контроллере

$scope.templateName = 'path/to/my/template.html';

и изменение этого значения в дайджесте должно быть динамическим lly обновить содержимое для вас

источник

2016-01-13 12:32:55

Динамически загружать шаблоны (частичные) в Angular.js

ответ

Смежные вопросы