Fore将new元素应用为指令的默认元素

Question

如何强制将新元素设置为指令的默认元素？注意，必须将新元素连接到此范围。

示例：

<div ng-test />

JS：

app.directive("ngTest", ["$interval", "$compile", function($interval, $compile) {
        return {
            restrict:'A',
            link: function($scope, $element, $attrs) {
                if($element[0].tagName === "div"){
                    var el = document.createElement('span');
                    el.setAttribute('ngTest','')
                    $element[0].outerHTML = el.outerHTML;
                }
                console.log($element[0]) // still <div>, but from domDocument has been changed to span
                // how to force apply? 
            }
        }
    }]);

Answer 1

也许您需要做的就是为指令ngTest设置div的内联样式？

div[ng-test] {
    display: inline;
}

但如果你真的有充分的理由用div替换span，你可以这样做：

var el = angular.element(document.createElement('span'));
el.attr('ng-test', '').html($element.html());

$element.replaceWith(el);
$compile(el)($scope);
$element = el;

请注意，您不能只替换outerHTML。你需要正确设置内部内容，设置属性（它是ng-test，而不是ngTest），用新的span替换旧的div并编译它。

演示：http://plnkr.co/edit/EsU7Ke4nMlPiQXZ7VWXc?p=preview

Answer 2

您可以为指令应用模板，并且有replace-flag，它会删除旧的directive-element并将模板插入$element[0]。

return {
      replace: true,
      template: '<span></span>',
      restrict: 'A',
      //...
};