I am curious about how to create a dynamic template directive. Here's the challenge - when I am on the main page or main categories such as page1 or page2, my template should include all the divs.
However, when I am on a submenu like subpage1 or subpage2, I only want to display 3 divs. How can I dynamically accomplish this? I understand that I need to use my directive on each subpage.
For example:
<my-template whereIam="page1"></my-template><my-template whereIam="subpage2"></my-template>Unfortunately, I am struggling to implement this. Can anyone provide guidance?
Here is my directive with an 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>"
};
}]);
Here is the HTML on one of the pages:
<my-template whereIam="??" ></menu-template>Check out this Plunkr for an example:
http://plnkr.co/edit/kVk3mJWUbTqhFEHVUjt1?p=preview
I have tried looking for a solution but I'm feeling overwhelmed. Should I use $compile to make this work?