CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-ng-transclude
Trufa
Trufa

Reputation: 40717

Repeating a directive with transclude that is different each time

In my angular application I have several panels which have a shared structure, identical html.

Inside the panel the content and behavior changes, basically each one is a separate directive, let's call them panel-content.

This is the close to the solution I think is optimal but I have some architectural doubts.

Since I have directive (which has transclude true set):

<panel></panel>

It's template looks like this:

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

I have to repeat the panels

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

This is all fine, but what would be a reasonably good way of "choosing" on each iteration which <panel-content> should I show?

Lets say I have a panel.id I can use.

I notice I can achieve it in several ways, I could do an ng-switch inside the <panel-content> view using the panel id, I could set up that the templateUrl of has a dynamic part and links to different URLs depending on the panel.id.

But for some reason, I am convinced I am missing something nicer more straightforward?

Please not that this architecture is not set in stone, if there is another structure that would better fit my needs please let me know.

So, the question again is, how do I choose? Or rather, who is responsible for choosing which <panel-content> should be displayed.

Upvotes: 1

Views: 86

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

If I understand you right, I would use ng-include in directive that changes each time the template by id:

Something like:

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

and Directive:

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;
            };
         }
      });

app

 $rootScope.list_templates = [
   { id: 0, value: 'partials/upcoming_0.html'},
   { id: 1, value: 'partials/upcoming_1.html'},
   { id: 2, value: 'partials/upcoming_2.html'}
];

Upvotes: 3

Related Questions