In my quest to develop a custom directive that comprises a label and an input field, I encountered the following scenario:
<form-field label="Name" ng-model="person.name"></form-field>
Here is the definition of the directive:
app.directive("formField", function(){
var ignoreAttrs = ["label"];
return {
priority: 3, //ensuring it executes before ngModel.
template: "<div>" +
"<label>{{label}}</label>" +
"<input type='text' />" +
"</div>",
scope: true,
compile: function(tElement, tAttrs){
var $input = tElement.find("input");
//transferring attributes from directive element to internal input field
var attrs = [];
$.each(tElement[0].attributes, function(index, attr){
if(ignoreAttrs.indexOf(attr.label) < 0){
attrs.push(attr.name);
$input.attr(attr.name, attr.value);
}
});
//removing the attributes from the directive element
$.each(attrs, function(index, attr){
tElement.removeAttr(attr);
});
return function postLink(scope, element, attrs){
scope.label = attrs.label;
};
}
};
});
The issue arises when angular scans the DOM and encounters two directives: form-field and ng-model. This leads to the ng-model being established in both the form-field element as well as the input, whereas I intend for ng-model to be exclusively within the input.
Is there a method to instruct angular to overlook a particular directive or perhaps an earlier developmental phase where I can execute the functionality to shift and eradicate attributes so that angular does not identify the ng-model directive in the form-field?
A potential resolution might involve all other directives having a prefix to prevent recognition by angular. Subsequently, in the compile function of the form-field, I could eliminate the prefix prior to copying to the input. Nonetheless, I am in search of a more refined solution.