AngularJS - directive with dynamic template

Question

I'm wondering - how to make a Directive with dynamic template. The thing is - When I'm on the main page and main categories like page1 or page2 my template should have all the divs

When I'm on the submenu like subpage1 or subpage2 I want to have only 3 divs. How to dynamically achieve it? I know that I have to use on each subpage my directive

<my-template whereIam="page1"></my-template> or <my-template whereIam="subpage2"></my-template>

But I can't achieve it. Could you help me?

My directive with example template:

angular.module('dynamic-template').directive('myTemplate', function () {
    return {
        restrict: 'E',
        template: "<div1> "
                    + "<h1> Main pages and subpages </h1>"
                + "</div1>"
                + "<div2>"
                    + "<h2> Main pages and subpages </h2>"
                + "</div2>"
                + "<div3>"
                    + "<h3> Main pages and subpages </h3>"
                + "</div3>"
                + "<div4>"
                    + "<h4> Only mainpages </h4>"
                + "</div4>"
                + "<div5>"
                    + "<h5> Only subpages </h5>"
                + "</div5>"                     
    };
}]);

HTML on one of the pages:

<my-template whereIam="??" ></menu-template>

Example Plunkr

http://plnkr.co/edit/kVk3mJWUbTqhFEHVUjt1?p=preview

I have searched for this, but I'm lost :(

Have I use a $compile to achieve it?

Community · Accepted Answer · 2017-05-23 11:51:09Z

1

*note: Personally I prefer having the template in a separate file (use templateUrl)

but well...

You can pass through the page-type of page and use ng-if's.

angular.module('dynamic-template').directive('myTemplate', function () {
return {
    restrict: 'E',
    scope: { isMain: "=main"},
    template: "<div1> "
                + "<h1> Main pages and subpages </h1>"
            + "</div1>"
            + "<div2>"
                + "<h2> Main pages and subpages </h2>"
            + "</div2>"
            + "<div3>"
                + "<h3> Main pages and subpages </h3>"
            + "</div3>"
            + "<span ng-if='isMainPage'><div4>"
                + "<h4> Only mainpages </h4>"
            + "</div4>"
            + "<div5>"
                + "<h5> Only mainpages </h5>"
            + "</div5></span>"                     
};
}]);

and in your html (when it is a main page)

<my-template main="true"/>

Otherwise, my answer on a similar question might work fine for you:

This way of doing it does require you to create separate html files for each file

See other Stackoverflow answer

or the Plunkr directly

Plunkr

app.directive('myDirective', [function(){

return {
    template: '<div ng-include="getTemplate()"></div>',
    restrict: 'E',
scope: {template: '='},
link: function(scope, element, attr, ctrl) {
  var baseURL = 'templates/myDirective.'

  scope.getTemplate = function(){
      baseURL = "" //remove this
      return baseURL + scope.template + ".html"
    };
}
};
}]);

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 20, 2015 at 10:03

rmuller

1,83712 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kamyk Over a year ago

Thanks for help, but - I have updated my Plunkr and your solution (based on ng-if) doesn't work :(

kamyk Over a year ago

Oh, I made a mistake in my code, sorry. One last question - what if I want to display one header only in subpage?

rmuller Over a year ago

You can do the same :) <h1 ng-if="!isMainPage">I am a sub page header</h1>

kamyk Over a year ago

Thanks a lot for your help!

Phil Kearney · Accepted Answer · 2015-07-20 10:38:30Z

1

Why not do as rmuller said and use a templateURL, but you can pass in the param and return the correct template example

templateUrl: function (elem, attrs) {
                if (attrs.isMain === 'mainPage') {
                    return 'main_view.html';
                }
                return 'other_view.html';
            },

So you would seperate out your templates into files. I think this would be the best way in my own opinion

answered Jul 20, 2015 at 10:38

Phil Kearney

1668 bronze badges

1 Comment

kamyk Over a year ago

Yes, I'm trying also with templateUrl, but for now I'm testing simple template. Also thank you for help!

Collectives™ on Stack Overflow

AngularJS - directive with dynamic template

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related