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

问题描述

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

使用模板的原因是我可以向其中添加 ng-* 指令(因此开发人员不需要记住指令名称以外的任何内容).

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

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

很遗憾您不能执行以下操作:

module.directive( 'myDir', [ '$window', function( $window ) {返回 {限制:A"，控制器:函数($scope，$element){$scope.tag = $element[0].nodeName;}模板:<{{tag}} data-ng-transclude ng-*=''></{{tag}}>",转置:真实，替换:真的，链接:函数(范围、元素、属性){}}}]);

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

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

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

与

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

这回避了使用许多 ng-* 指令的好处的问题?它只是Angular 方式"吗?

解决方案

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

module.directive( 'myDir', [ '$window', function( $window ) {返回 {限制:A"，模板:函数(元素，属性){var tag = element[0].nodeName;return "<"+tag+" data-ng-transclude ng-*=''></"+tag+">";},转置:真实，替换:真的，链接:函数(范围、元素、属性){}}}]);

HTML

<span>一些其他的东西</span><div>更多内容</div>
<span data-my-dir></span><h1 data-my-dir></h1>

输出

<span class="ng-scope">其他一些东西</span><div class="ng-scope">更多内容</div>
<span ng-*=""data-ng-transclude=""data-my-dir=""></span><h1 ng-*=""data-ng-transclude=""data-my-dir=""></h1>

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

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.

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

        }
    }   
}]);

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.

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>

with

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

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

解决方案

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>

Output

<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屋！