Повторение директивы с transclude, которая каждый раз отличается

В моем угловом приложении у меня есть несколько панелей с общей структурой, идентичным html.

Внутри панели содержимое и поведение меняются, в основном каждое из них представляет собой отдельную директиву, назовем их panel-content.

Это близко к решению, которое я считаю оптимальным, но у меня есть некоторые архитектурные сомнения.

Поскольку у меня есть директива (которая включает истинный набор):

<panel></panel>

Его шаблон выглядит так:

<div>
    Content
    <ng-transclude></ng-transclude>
</div>

Я должен повторить панели

<ul>
    <li ng-repeat="panel in panels">
        <panel>
            <panel-content></panel-content>
        </panel>
    </li>
</ul

Это все хорошо, но что может быть достаточно хорошим способом «выбирать» на каждой итерации, какие <panel-content> я должен показывать?

Допустим, у меня есть panel.id, который я могу использовать.

Я заметил, что могу добиться этого несколькими способами, я мог бы сделать ng-переключатель внутри представления <panel-content>, используя идентификатор панели, я мог бы настроить, чтобы templateUrl имел динамическую часть и ссылки на разные URL-адреса в зависимости от panel.id.

Но по какой-то причине я убежден, что упускаю что-то более приятное и прямолинейное?

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

Итак, снова вопрос, как выбрать? Вернее, кто отвечает за выбор того, какие <panel-content> должны отображаться.


javascript angularjs angularjs-directive angularjs-ng-transclude
person Trufa    schedule 10.04.2015    source источник
comment
Зависит ли ваш контент от panel.id?   -  person Omri Aharon    schedule 10.04.2015
comment
Да. содержимое каждой панели отличается, и я хочу выбрать его в зависимости от panel.id или вы спрашиваете о масштабе?   -  person Trufa    schedule 10.04.2015

Ответы (1)


arrow_upward
3
arrow_downward

Если я вас правильно понял, я бы использовал ng-include в директиве, которая каждый раз меняет шаблон на id:

Что-то вроде:

<ul>
    <li ng-repeat="panel in panels">
        <panel type-id="panel.id">
        </panel>
    </li>
</ul>

и директива:

app.directive('panel', 
 function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<ng-include src="getTemplateUrl()"/>',


        link: function(scope,elem,attrs) {

           scope.getTemplateUrl = function() {

                var url;

                if(attrs.typeId !== undefined){
                    var url =  $rootScope.list_templates[attrs.typeId].value; // TODO: add validation
                  }


                return url;
            };
         }
      });

приложение

 $rootScope.list_templates = [
   { id: 0, value: 'partials/upcoming_0.html'},
   { id: 1, value: 'partials/upcoming_1.html'},
   { id: 2, value: 'partials/upcoming_2.html'}
];
person Maxim Shoustin    schedule 10.04.2015
comment
Хорошо, выглядит разумно, и я думаю, вы меня правильно поняли. Я поиграю с if на секунду и дам вам знать. - person Trufa; 10.04.2015
comment
Что эта директива добавляет поверх ng-include? Почему бы просто не использовать <div ng-include="$root.listTemplates[$index].value"> вместо этой директивы <panel>? / @Труфа - person New Dev; 10.04.2015
comment
@NewDev Мне нужно включить директиву, а не шаблон. Я думаю, это то, о чем вы спрашиваете. - person Trufa; 10.04.2015
comment
@Trufa, в чем разница? Эта директива <panel> является лишь очень тонкой оболочкой вокруг директивы ng-include. Если вы просто хотите скрыть детали URL-адреса шаблона, я могу это понять, но тогда я бы поместил фактические URL-адреса в настраиваемую службу и использовал ее. - person New Dev; 10.04.2015
comment
@ Максим, моя проблема в том, что мне нужно, чтобы каждая панель была отдельной директивой, как вы это предлагаете, это только одна, которая показывает разные шаблоны. - person Trufa; 10.04.2015
comment
@NewDev, давайте продолжим здесь, чтобы не обсуждать в комментариях: chat.stackoverflow.com/ номера/info/74968/ - person Trufa; 10.04.2015
comment
@Maxim, спасибо за ответ, это кажется правильным, но я думаю, что мне, возможно, придется удалить вопрос, так как я задал неправильный вопрос. Я прошу прощения за это. - person Trufa; 10.04.2015
comment
@Trufa нельзя удалить, потому что за мой ответ проголосовали. - person Maxim Shoustin; 10.04.2015
comment
@MaximShoustin в любом случае нет смысла удалять, потому что это может быть полезно для других, в любом случае это правильно для этого вопроса. Я сделаю еще один. - person Trufa; 10.04.2015