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

AngularJS directive that uses the original element type in template

本文关键字：指令 原始 元素 类型 AngularJS      更新时间：2023-09-26

我正在为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 ) {
        }
    }   
}]);

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

此后，我在代码中用香草JS取代了对ng-*和模板的需求，例如：

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

带有

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

这就引出了使用许多ng-*指令的好处问题？这只是"角度方式"吗？

我已经考虑这个问题好几个星期了，直到我意识到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>
相关文章：