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?

Answer 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"
    };
}
};
}]);

Answer 2

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