如何让angular指令包含&替换另一个指令

How to get an angular directive to include & replace another directive?

本文关键字：指令 替换 另一个 包含 angular      更新时间：2023-09-26

我有一个AngularJS指令，directiveFoo由一个属性实例化:

<div directiveFoo></div>

我希望我的directiveFoo总是实例化另一个指令，例如模板是:

<div directiveBar="123"></div>

我的问题是——这是否可能在不创建所有浪费节点的情况下做到?我想将replace添加到我的指令中，但随后它吹走了directiveFoo

我最终想要的是:

<div directiveFoo directiveBar="123"></div>

与两个控制器连接。

这是一个简化的例子。我想阻止:

<div directiveA>
    <div directiveB>
        <div directiveC="123">
            <div directiveD></div>
        </div>
    </div>
</div>

在我不需要所有嵌套DOM节点的情况下

然后直接吹走

这是不应该的。替换过程将所有的属性/类从旧元素迁移到新元素。——指令文档

因为属性是迁移的，所以directive-foo应该显示在生成的HTML中。

app.directive('directiveFoo', function() {
    return {
        template: '<div directive-bar="123">bar</div>',
        replace: true,
    }
});

上面的指令产生了以下HTML(在Chrome中测试):

<div directive-bar="123" directive-foo>bar</div>

小提琴。

在小提琴中，我还为每个指令创建了一个控制器(因为你提到你想要的)，我显示directive-bar可以访问directive-foo的控制器。

(我把bar作为文本放在模板中，只是为了方便右键单击它并选择"Inspect element")

相关文章：