Transclude затем заменить на angularjs

Question

Я хотел бы создать директиву, которая заменяет:

   <my-overlay class="someOverlay">
      <h4>Coucouc</h4>
    </my-map-overlay>

С:

<div class="someOverlay default-overlay">
 <h4>Coucouc</h4>
</div>

replace метод пока не рекомендуется.

Как написать директиву, которая манипулирует DOM, создавая divдобавляет default-overlay класс к предыдущему определенному, включает и заменяет <my-map> директива?

Можно ли разделить процесс следующим образом: манипулирование DOM в compile и включив в link?

Answer 1

Это коммит для "замены", который будет удален: https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb

Если вы читаете некоторые из последних комментариев, кажется, что замена не может быть признана устаревшей в конце концов. Однако это может быть способом достижения того, что вы хотите:

.directive('myOverlay', function(){
    return {
        restrict: 'E',
        template: '<div ng-transclude></div>',
        transclude: true,
        link: function (scope, element) {
            element.children()[0].setAttribute('class', element.attr('class') + ' default-overlay');
            element.replaceWith(element.children()[0]);
        }
    }
});

http://jsfiddle.net/b6ww0rx8/10/