Attributes in the root template element of directive

Question

I have the simple directive:

.directive('myDirective', function () {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
       label: '@',
       ngModel: '=',
       class: '@'
    },

    template: "<div><span>{{label}}</span><input class='{{class}}' type='text' ng-model='ngModel' /></div>"
}

Using:

<myDirective label="myLabelA myClassB" class="my-class" ng-model="myModel" />

In result looks like:

<div label="myLabelA myClassB" class="my-class" ng-model="myModel">
    <span>myLabel</span> 
     <input class="myLabelA myClassB" type="text" ng-model="myModel" />
</div>

Is there a way to eliminate the attributes from the root div element?

Answer 1

You can set replace to false, then HTML will contain original my-directive element and new element inside of it, without attributes of parent.

http://plnkr.co/edit/Vdw3YVMwzgElCFF7EGeM?p=preview

If you need to remove back-effects of existence DOM element - rename attribute class of directive, so browser will not apply it to parent element.

Answer 2

You can remove these attributes by providing a compile function to the directive that removes those attributes from the element:

.directive('myDirective', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            label: '@',
            ngModel: '=',
            class: '@'
        },
        template: "<div><span>{{label}}</span><input class='{{class}}' type='text' ng-model='ngModel' /></div>",
        compile: function ($element) {
            $element.removeAttr('label')
                    .removeAttr('class')
                    .removeAttr('ng-model');
        }
    }
})

http://jsfiddle.net/9hB43/2/

regards