angularjs - 当replace=true时防止 Angular 复制属性

Question

以下指令:

var app = angular.module('demo', []);
app.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<h1>Foo bar</h1>'
    };
});

具有以下用法:

<my:directive foo="bar"></my:directive>

呈现以下 HTML:

<my:directive foo="bar"><h1>Foo bar</h1></my:directive>

因为我想用提供的模板替换我的指令，所以我设置了 replace:true。这会生成以下 HTML:

<h1 foo="bar">Foo bar</h1>

请注意，Angular 将我的指令的属性复制到模板元素(foo="bar")。我怎样才能防止这种行为？

Answer 1

您可以手动删除指令的链接函数中的属性:

    .directive('myDirective', function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<h1>Foo bar</h1>',
            link: function(scope, elm, attrs){
                elm.removeAttr('foo');
            }
        };
    });

这是a fiddle该指令适用于您的情况。

编辑:您可以扩展它以通过简单的循环动态删除所有属性:

    .directive('myDirective', function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<h1>Foo bar</h1>',
            link: function(scope, elm, attrs){
                for(var attr in attrs.$attr){
                    elm.removeAttr(attr);
                }
            }
        };
    });