Question

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和Google上搜索过，但无法找到答案。此外，我无法提出可行的解决方案，因此我无法提供解决方案代码。

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

Answer 1

这将为您提供与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>

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

并纠正我，如果我错了，但我相信你不再需要一个模板来包含单个根元素

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

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

现在没有单根元素

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

Answer 2

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

<强> HTML

<div my-directive></div>

如何在Angular指令

2 个答案: