如何获得角度指令以包括&替换另一个指令?

时间:2013-06-01 23:50:23

标签: javascript angularjs

我有一个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节点的情况下

1 个答案:

答案 0 :(得分:3)

  

然后它吹走了direFoo

不应该。 “替换过程将所有属性/类从旧元素迁移到新元素。” - 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

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

(我将bar作为文本添加到模板中,只是为了更容易右键单击它并选择“Inspect element”。)