使用该原始元素类型在模板AngularJS指令 [英] AngularJS directive that uses the original element type in template

问题描述

我正在开发的角度UI和排版基于指令。在这种情况下，在被施加了指令的元素是未知 - 从一个div，跨度什么，H1至H5型

I'm developing UI and typography based directives for Angular. In such cases, the element the directive is being applied on is unknown - anything from a div, span, h1 to an h5.

之所以使用一个模板，所以我可以添加纳克 - * 指令给它（这样开发人员不需要记住任何东西，但指令名）。

The reason for using a template is so I can add ng-* directives to it (so the developer doesn't need to remember anything but the directive name).

我已经有限的成功添加属性和重新编译元素。没有成功，当谈到加入 NG-transclude 但是。创建一个新的元素，并更换旧自带的集成问题（忽略其他指令和数据属性，可能是​​在元素上），有一点成功复制这些属性并将其添加到新的元素。

I've had limited success adding attributes and recompiling the element. No success when it comes to adding ng-transclude however. Creating a new element and replacing the old comes with integration issues (ignore other directives and data attributes that may be on the element), had little success copying these attributes and adding them to the new element.

这看起来应该是很简单，因为模板本身可以改变任何你指定（使用元素 transclude 和替换），当然还有的'做的很长的路？

This seems like it should be really simple, as template itself can change the element to whatever you specify (using transclude and replace), surely there's the 'long way of doing it'?

这太糟糕了，你不能做到以下几点：

It's too bad you can't do the following:

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 ) {

        }
    }   
}]);

我觉得主要的问题是我在找更换和与模板transclude的元素，而不是添加模板（或编译的元素）作为一个孩子。

I think the major issue is I'm looking to replace and transclude the element with the template, not add the template (or compile the element) as a child.

因为我已经取代了需要纳克 - * 在我的code香草JS模板，例如：

I have since replaced the need for ng-* and templates with vanilla JS in my code, eg:

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

与

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

这引出许多使用纳克的利益问题 - * 指令？难道仅仅是'角的道路？

Which begs the question of the benefit of using many ng-* directives? Is it just 'the Angular way'?

推荐答案

我一直在思索这个问题了几个星期，现在直到我意识到模板可能是与访问能力元素和 ATTRS函数。因此，我能够与现有的元素标签返回的模板。

I've been mulling over this question for a couple weeks now until I realised that template could be a function with the ability to access element and attrs. Thus I was able to return a template with the existing element tags.

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>

这篇关于使用该原始元素类型在模板AngularJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！