如何替换Angular指令中不推荐使用的替换属性

How to substitute deprecated replace-property in Angular directives

本文关键字：替换 属性 指令 何替换 Angular      更新时间：2023-09-26

Angular中的指令曾经有一个replace属性，现在已经弃用了。

angular.module('myModule')
    .directive('myDirective', myDirectiveCtrl);
function myDirectiveCtrl() {
    return {
        'restrict': 'A',
        'scope': false,
        'replace': true,
        'template': '<span>content</span>',
        'link': function () {}
    };
}

在模板中，我可以使用这样的东西：

<div my-directive></div>

它将被这个取代

<span>content</span>

这个例子可能不是最有用的，但我想指出这个概念。

我已经在Stackoverflow和谷歌上搜索过了，但找不到答案。此外，我无法想出一个有效的解决方案，因此我无法提供解决方案代码。

问题：如何在较新的Angular版本中替换replace-属性？

这将为您提供与replace: true 指令相同的输出

angular.module('myModule')
    .directive('myDirective', myDirectiveCtrl);
function myDirectiveCtrl() {
    return {
        'restrict': 'A',
        'scope': false,
        'template': 'content',
        'link': function () {}
    };
}

HTML

<div><span my-directive></span></div>

当所有属性（范围）都必须转移到一个新元素时，Replace true给开发人员带来了很多麻烦，所以现在的问题是，你需要以不同的方式规划DOM和指令，这样你就不会使用Replace

如果我错了，请纠正我，但我相信这样你就不再需要一个包含单一根元素的模板了

以前的模板需要单个根元素

<div>
  <span></span>
  <p></p>
</div>

现在没有单个根元素

<span></span>
<p></p>

.directive('myDirective', function()  {
    return {
        'restrict': 'A',
        'scope': false,
        'replace': true,
        'template': '<span>content</span>',
        'link': function () {}
    };
});

HTML

<div my-directive></div>
相关文章：