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

Fore apply new element as default element for directive

本文关键字：元素 指令 默认 应用 新元素      更新时间：2023-09-26

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

例：

<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? 
            }
        }
    }]);

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

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

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

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

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

return {
      replace: true,
      template: '<span></span>',
      restrict: 'A',
      //...
};
相关文章：