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

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

例如：

<div ng-test />

JS:

app.directive（“ngTest”、[“$interval”、“$compile”、函数（$interval、$compile）{
返回{
限制：'A'，
链接：函数（$scope、$element、$attrs）{
如果（$element[0]。标记名==“div”）{
var el=document.createElement（'span'）；
el.setAttribute（'ngTest'，''）
$element[0].outerHTML=el.outerHTML；
}
console.log（$element[0]）//仍然是，但从domDocument更改为span
//如何强制执行？
}
}
}]);

您可以为指令应用模板，并且有替换标志，它删除旧的指令元素并将模板作为

$element[0]

插入

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

返回{
替换：正确，
模板：“”，
限制：“A”，
//...
};

也许您所需要做的就是使用指令

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

。您需要正确设置内部内容，设置属性（它是

ngTest

，而不是

ngTest

），用新span替换旧div并编译它

---

演示：为什么要将其更改为span？您没有更改标记名，只有htmlI没有像那样使用模板，但我通过XHR/AJAX获取任何xml来替换旧元素。

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

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