如何获得一个包含和替换另一个指令的角度指令？

Question

I have an AngularJS directive, directiveFoo instantiated by an attribute:

<div directiveFoo></div>

I want my directiveFoo to always instantiate another directive, eg the template is:

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

My question is this -- Is this possible to do without creating all the wasted nodes? I'd like to add replace to my directive, but then it blows away directiveFoo

What I ultimately want is:

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

with the two controllers attached.

This is a simplified example. I'm trying to prevent:

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

in cases where I don't really need all the nested DOM nodes

Answer 1

but then it blows away directiveFoo

It shouldn't. "The replacement process migrates all of the attributes / classes from the old element to the new one. " -- directive doc

Because attributes are migrated, directive-foo should show up in the generated HTML.

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

The above directive results in the following HTML (tested in Chrome):

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

Fiddle .

In the fiddle I also create a controller for each directive (since you mentioned you wanted that), and I show that directive-bar can access directive-foo 's controller.

(I put bar as text in the template, just to make it easier to right-click on it and select "Inspect element").