javascript - 如何获得一个 Angular Directive(指令)来包含和替换另一个指令？

Question

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

<div directiveFoo></div>

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

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

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

我最终想要的是:

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

附有两个 Controller 。

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

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

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

Answer 1

but then it blows away directiveFoo

不应该。 “替换过程将所有属性/类从旧元素迁移到新元素。”-- directive doc

因为属性被迁移，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>

Fiddle .

在 fiddle 中，我还为每个指令创建了一个 Controller (因为你提到你想要那个)，并且我展示了 directive-bar 可以访问 directive-foo' Controller 。

(我把 bar 作为模板中的文本，只是为了更容易右键单击它并选择“检查元素”)。