在模板中使用原始元素类型的 AngularJS 指令

Posted 2023-02-22

【中文标题】在模板中使用原始元素类型的 AngularJS 指令

【英文标题】：AngularJS directive that uses the original element type in template

【发布时间】：2013-12-06 21:37:47

【问题描述】：

我正在为 Angular 开发基于 UI 和排版的指令。在这种情况下，应用指令的元素是未知的 - 从 div、span、h1 到 h5 的任何元素。

使用模板的原因是我可以在其中添加ng-* 指令（这样开发人员就不需要记住指令名称以外的任何内容）。

我在添加属性和重新编译元素方面的成功有限。但是，在添加 ng-transclude 时没有成功。创建新元素并替换旧元素会带来集成问题（忽略元素上可能存在的其他指令和数据属性），复制这些属性并将它们添加到新元素中几乎没有成功。

这看起来应该很简单，因为template 本身可以将元素更改为您指定的任何内容（使用transclude 和replace），肯定还有“很长的路要走”吗？

你不能做以下事情太糟糕了：

module.directive( 'myDir', [ '$window', function( $window ) 
    return 
        restrict: "A",
        controller: function( $scope, $element ) 
            $scope.tag = $element[0].nodeName;
        
        template: "<tag data-ng-transclude ng-*=''></tag>",
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) 

        
       
]);

我认为主要问题是我希望用模板替换和嵌入元素，而不是作为子元素添加模板（或编译元素）。

我已经在我的代码中用 vanilla JS 替换了对 ng-* 和模板的需求，例如：

<div data-ng-style="'font-size':fontSize></div>

与

element[0].style.fontSize = scope.fontSize;

这引出了使用多个ng-* 指令的好处的问题？它只是“Angular 方式”吗？

【参考方案1】：

我已经考虑这个问题几个星期了，直到我意识到template 可能是一个能够访问element 和attrs 的函数。因此，我能够返回带有现有元素标签的模板。

module.directive( 'myDir', [ '$window', function( $window ) 
    return 
        restrict: "A",
        template: function( element, attrs ) 
            var tag = element[0].nodeName;
            return "<"+tag+" data-ng-transclude ng-*=''></"+tag+">";
        ,
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) 

        
       
]);

html

<div data-my-dir>
    <span>some other stuff</span>
    <div>more stuff</div>
</div>

<span data-my-dir></span>

<h1 data-my-dir></h1>

输出

<div ng-*="" data-ng-transclude="" data-my-dir="">
    <span class="ng-scope">some other stuff</span>
    <div class="ng-scope">more stuff</div>
</div>

<span ng-*="" data-ng-transclude="" data-my-dir=""></span>

<h1 ng-*="" data-ng-transclude="" data-my-dir=""></h1>