AngularJS - 如何有一个动态的子指令一条指令 [英] AngularJS - how to have a directive with a dynamic sub-directive

问题描述

真是这种努力 - 都想尽办法，我能想到的。希望有人能提供帮助。

Really struggling with this - have tried every way I can think of. Hopefully, somebody can help.

我有这为我创建一个自定义的控制的概要指令。定制控制的中央部是成为通过基于关于所述外指令一个范围的变量的值的进一步动态生成的指令psented重新$ P $。范围变量包含内部指令的名称。我这样做，因为我的网页将有多个动态生成的元素都具有一个共同的布局，但不同的内部内容。

I have a directive which creates the outline of a custom control for me. The central part of the custom control is to be represented by a further dynamically-generated directive based on the value of a scope variable on the outer directive. The scope variable contains the name of the inner directive. I am doing this because my page will have multiple dynamically-generated elements all with a common layout but different inner content.

即。我的外部指令的一个例子：

i.e. an example of my outer directive:

<div data-inner="{{inner}}">
    <!-- div content here --->
<div {{inner}} />

{{}内} 设置为进一步指令的名字 - 在这种情况下，搜索。因此，我的页面应该变成：

{{inner}} is set to the name of a further directive - in this case search. My page should therefore become:

<div data-inner="search">
    <!-- div content here --->
<div search />

与搜索在较低DIV也受到该指令的内容所取代。

with search on the lower div also being replaced by the content of that directive.

任何想法？

更新
这里的href=\"http://jsfiddle.net/jonathanwest/5wEjD/1/\">的jsfiddle 重新presenting我有这个问题一个基本的

UPDATE Here's a basic jsFiddle representing the issue I have - note the third div is not displayed.

推荐答案

我这里创建一个小提琴。

I have create a fiddle here.

这些指令。

<script type="text/ng-template" id="one">
    <div class="one"></div>
</script>
<script type="text/ng-template" id="two">
     <div class="two"></div>
</script>

在这里，你做动态加载

And here you do dynamic loading

<div ng-repeat='template in inner' ng-include='template'></div>

看看这可以帮助你，解决你的目的。我想提出的每个指令到一个模板，然后用纳克包括

See if this helps you, and solves your purpose. I am making each directive into a template and then using ng include

这篇关于AngularJS - 如何有一个动态的子指令一条指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！