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

Question

我有一个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节点

Answer 1

但随后吹走directiveFoo

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

由于属性已迁移，因此应在生成的HTML中显示directive-foo。

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。

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

（我把bar作为文本放在模板中，只是为了更容易右击它并选择“检查元素”）。