Директива AngularJS, использующая исходный тип элемента в шаблоне

Я разрабатываю директивы на основе пользовательского интерфейса и типографии для Angular. В таких случаях элемент, на который применяется директива, неизвестен - что угодно: от 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"?

Ответ 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>