I am currently working on creating a generic field and utilizing a directive for it. In my HTML code, I have defined the following:
<div def-field="name"></div>
<div def-field="surname"></div>
<div def-field="children"></div>
These fields can be of two types: either a simple element (like the first two) or a list of elements (like the third one). The scope variable contains the definitions of all fields and their respective types. To handle this, I have developed the "def-field" directive:
app.directive("defField", function($compile, $parse, $http) {
restrict: 'A', // only for attributes
scope : true,
return {
restrict: 'A', // only for attributes
scope : true,
compile: function compile(tElement, tAttributes) {
//I need to determine the type of field here.
//If it is an array, special compiling code needs to be executed
if(fieldType === 'array') {
//execute special code for compilation
}
}
if(fieldType === 'array') {
//return value for array type
var returnValue = {pre : linkFunction};
} else {
//return value for normal type
var returnValue = {
pre : linkFunction,
post: function(scope, element, attrs){
$compile(element.parent())(scope);
}
};
}
return returnValue;
}
The challenge I am facing is that I need to access the fieldType from the scope variable within the compile function, where the scope variable is not accessible. Is there a way to overcome this issue?
Currently, I am passing the type as an attribute, but this approach is not ideal in the long run.