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

Question

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

        }
    }   
}]);

我认为主要问题是我希望用模板替换和转换元素,而不是将模板(或编译元素)作为子项添加.

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

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

同

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

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

Answer 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>