javascript - 嵌入然后替换为 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>指令？

是否可以将流程划分为: compile 中的 DOM 操作并包含在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/