Javascript 指令的根模板元素中的属性

我有一个简单的指令：

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

.directive（'myDirective'，函数（）{
限制：'E'，
替换：正确，
是的，
范围：{
标签：“@”，
ngModel:“=”，
类别：“@”
},
模板：“{label}}”
}

使用：

<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元素中的属性？

您可以将

replace

设置为false，然后HTML将包含原始

my directive

元素和其中的新元素，而不包含父元素的属性

---

如果需要删除存在DOM元素的后效应-重命名指令的属性

类

，则浏览器不会将其应用于父元素。

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

.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');
        }
    }
})

.directive（'myDirective'，函数（）{
返回{
限制：'E'，
替换：正确，
是的，
范围：{
标签：“@”，
ngModel:“=”，
类别：“@”
},
模板：“{label}}”，
编译：函数（$element）{
$element.removeAttr（'label'）
.removeAttr（'class'））
.removeAttr（“ng-model”）；
}
}
})

---

关于

我已将transclude=false设置为false，但问题仍然存在。我认为这是不可能的。您为什么需要删除它们？否则，我的div会有额外的css样式。@feak请毫不犹豫地提及它。请参阅更新的答案。我可能错了，但我认为如果我们离开它，DOM看起来很难看，对不起，我的完美主义。在这种情况下，原始的element在dom中保留所有属性。

@feak refresh answer。