javascript - 指令根模板元素中的属性

Question

我有一个简单的指令:

.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>"
}

使用:

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

结果如下:

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

有没有办法消除根 div 元素中的属性？

Answer 1

您可以通过向指令提供编译函数来删除这些属性，以从元素中删除这些属性:

.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/

问候