AngularJS 'A' directive with null templates copy tags to DOM - templates

Question

For my project, I have a requirement for directives to be defined that do not modify the DOM, and also do not leave artifacts of their existence in the DOM. I seem to be unable to make this work with AngularJS.
Consider these examples:
<div empty-arg="some-param"></div>
<div null-arg="another-param"></div>
With associated directives defined as follows:
var module = angular.module( 'component', [] );
module.directive('emptyArg', function() {
template: '',
replace: true,
scope: false,
link: function() { // ... }
};
module.directive('nullArg', function() {
template: null,
replace: true,
scope: false,
link: function() { // .... }
};
After compilation, I want the resulting DOM elements to look like this:
<div></div>
<div></div>
But the absence of a template seems to cause AngularJS to ignore the replace request, leaving the resulting DOM elements looking like this:
<div empty-arg="some-param"></div>
<div null-arg="another-param"></div>
How can I force AngularJS to get rid of these attributes in the post-compile DOM?
A jsFiddle demonstrating this can be found here:
http://jsfiddle.net/vankirkc/ezN3M/34/
Update:
It is possible to delete the created attributes after they are created, but what I am really looking for is some way to leverage the template definition parameter to intercept the creation of the DOM element such that it doesn't copy this directive across. It appears this isn't possible in version 1.0.3.

Answer 1

Actually "empty-arg" and "null-arg" are just normal attributes of DOM element, AngularJS is using them to mark which directives to apply at element.
So it would be actually bad, if one directive will remove attributes from DOM element. For example - it is possible to write another directive that will use this attributes to modify its behaviour: in different AngularJS libraries you can see, that controls use ngModel attribute to get expression on which element is been bound.
And also as those attributes are already present at DOM tree, deleting them will cause DOM tree modification and can imply performance issue.
If still you actually whant to delete those attributes, you can try to modify second argument of linking function:
attrs.$set('empty',undefined);
But generally I would not recommend to do so: you can save some memory (but I am not sure that it would be saved - I think it should be benchmarked), but you'll get bigger loading time as DOM tree would be modified.
But anyway here is Fiddle to demonstrate that it is possible.

Answer 2

If you want to remove all attributes, you can do it in the compile function:
for(var i=0; i < tElement[0].attributes.length; i++){
tElement.removeAttr(tElement[0].attributes[i].name)
};
Fiddle.
Update: as #Josh pointed out in a comment, removing the attributes will essentially make this a run-once-only directive, and none of the attributes will be available in the link function, making this answer a non-answer/non-solution.