AngularJS - Switch between Templates - php

Question

Currently, I have my directives being switched out in this fashion.
In my directive:
(function(){
'use strict';
var controller = ['$scope', function ($scope) {
}];
angular
.module('moduleName', ['myDependency'])
.directive('dirName', function($compile, $window){
return{
restrict: 'E',
replace: true,
require: [ '^?myDependency'],
scope: false,
controller: controller ,
template:
`<div ng-switch="templateConfig.type">
<div ng-switch-when='con1'>
<p> Config 1 </p>
</div>
<div ng-switch-when='con2'>
<p> Config 2 </p>
</div>
<div ng-switch-when='con3'>
<p> Config 3 </p>
</div>
</div>`
And in the PHP file, I have the following:
function pageController($scope, $http, $filter, $cleo, $timeout, $compile) {
$scope.templateConfig= {type: 'Con2'};
}
<div class="row-fluid">
<div class="span1" id="title" > name </div>
<div class="span11">
<dirName>
</dirName>
<br/>
</div>
</div>
<div class="row-fluid">
<div class="span1" id="title" > name2 </div>
<div class="span11">
<dirName>
</dirName>
<br/>
</div>
</div>
So how it works is that when I can switch between templates using {type: 'Con2'}. However, this will affect both <dirName></dirName> tags. What I want is for me to have the ability to define them independently of each other.
What I want would be something like <dirName templateConfig=Con1></dirName>. I not entirely sure how to achieve this though but I don't think it should be too difficult to make the switch.
Also, I did leave out a lot of code from the PHP file and changed the original names in the code but none of that should be relevant.

Answer 1

Use the function form of the template property:
app.directive('dirName', function($compile, $window){
return{
restrict: 'E',
template: function (elem, attrs) {
switch(attrs.templateConfig) {
case 'con1':
return `<p> Config 1 </p>`;
case 'con2':
return `<p> Config 2 </p>`;
case 'con3':
return `<p> Config 3 </p>`;
};
}
};
})
Example usage:
<dir-name template-config="con2">
</dir-name>
Update
From the Docs:
template
Value may be:
A function which takes two arguments tElement and tAttrs (described in the compile function api below) and returns a string value.
— AngularJS Comprehensive Directive API Reference - template