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

您可以将replace设置为false，然后HTML将包含原始my-directive元素及其中的新元素，而不包含父级属性。

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

如果你需要删除存在DOM元素的反效果 - 重命名指令的属性class，那么浏览器不会将它应用于父元素。

Answer 2

您可以通过向指令提供编译功能来删除这些属性，该指令从元素中删除这些属性：

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

问候

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

2 个答案: