Angularjs – 使用指令添加ng- *属性

1)特定要素的指令

如果你知道你正在处理的元素将是div,span,h1,无论什么 – 或者它无关紧要(取一个元素并用你需要的元素替换它).

HTML

<div data-mydirective>
    <span>some other stuff</span>
    <div>more stuff</div>
</div>

指示

module.directive( 'mydirective',[ function() {
    return {
        restrict: "A",controller: function( $scope ) {
            $scope.test = function() {
                console.log('howdy');
            }
        },template: "<div data-ng-transclude data-ng-mouSEOver='test()'></div>",transclude: true,replace: true,link: function ( scope,element,attrs ) {

        }
    };
}]);

输出

<div ng-mouSEOver="test()" data-ng-transclude="" data-mydirective="">
    <span class="ng-scope">some other stuff</span>
    <div class="ng-scope">more stuff</div>
</div>

2)非特定元素的指令

这是我面临的问题.基本上,如果你有一个可能在h1,h2,div,nav等上的指令,你想在指令中添加你的ng- *和属性.

您不能使用模板,因为您不知道该元素是什么.不想拿一个h1并用div替换它吧？这就是我走下编译路线的原因.好吧,模板实际上可以是一个我们可以访问元素和attrs的函数.

指示

module.directive( 'mydirective',template: function( element,attrs ) {
            var tag = element[0].nodeName;
            return "<"+tag+" data-ng-transclude data-ng-mouSEOver='test()></"+tag+">";
        },attrs ) {

        }       
    }   
}]);

HTML /输出

与上述相同.将HTML中的div元素更改为nav,输出将镜像更改.