After reading a helpful article here, I decided to create my own directive in AngularJS to dynamically generate templates for windows based on the nature of the data being sent. For example, if the app needs to send text input, the directive will create an input area; if it needs to send a boolean value, it will create a checkbox.
However, after successfully creating the directive, I encountered an issue with binding the contents of the templates to be sent back.
I explored the documentation on directives and found the 'transclude' attribute that seemed like it could help me. Despite trying to implement it in my code below, I have not had success so far:
HTML
<div id="notespace">
<div id="userContainer" >
<template-type content="additionalField">
{{toBind}}
</template-type>
<button ng-click="addNote(toBind)">OK</button>
</div>
</div>
JavaScript file of HTML Controller Page
var noteCtrl = function ($scope) {
$scope.additionalField=[{
template:'text'
}]
for(var counter=0;counter<$scope.additionalField.length;counter++){
var template;
switch ($scope.additionaField[counter].template) {
case 'text':
template = 'inputNote';
break;
case 'otherTypeOfText':
template = 'areaNote';
break;
case 'number':
template = 'inputNote';
break;
case 'bool':
template = 'checkNote';
break;
case 'file':
template = 'fileNote';
break;
}
}
})
$scope.addNote=function(a) {
alert(a);
}
JavaScript file for the Directive
templateApp.directive('templateType',function($compile){
var inputNote='<div><input type="text"/></div>';
var areaNote='<div><textarea ></textarea></div>';
var checkNote='<div><input type="checkbox" /></div>';
var fileNote='<div >file</div>';
var getTemplate=function(type){
var template='';
switch (type) {
case 'inputNote':
template = inputNote;
break;
case 'areaNote':
template = areaNote;
break;
case 'checkNote':
template = checkNote;
break;
case 'fileNote':
template = fileNote;
break;
}
return template;
};
var linker=function(scope,element,attrs){
element.html(getTemplate(scope.content.template));
$compile(element.contents())(scope);
};
return{
restrict:"E",
replace:true,
transclude:true,
link:linker,
scope:{
content:'='
}
};
});
The main issue lies in the fact that the alert from the addNote function does not display anything or shows 'undefined', rather than displaying the content of the template like the inputArea does.