将新元素应用为指令的默认元素

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

您可以为指令应用模板，并且有替换标志，它会删除旧的指令元素并将模板插入为 $element[0]。

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

Answer 2

也许您需要做的就是使用指令 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 并编译它。

将新元素应用为指令的默认元素

Fore apply new element as default element for directive

javascript

angularjs

angularjs-directive

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