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

当replace = true时，防止角度复制属性

1 个答案: