AngularJS - 如何创建一个带有动态子指令的指令

Question

我遇到了很大的问题 - 已经尝试了我能想到的所有方法。希望有人能够帮助。

我有一个指令，为我创建一个自定义控件的大纲。自定义控件的中心部分应该由进一步基于外部指令上的作用域变量值动态生成的指令来表示。作用域变量包含内部指令的名称。我这样做是因为我的页面将具有多个动态生成的元素，所有这些元素都具有相同的布局但不同的内部内容。

即，我的外部指令的示例：

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

{{inner}}被设置为另一个指令的名称 - 在本例中为search。因此，我的页面应该变成：

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

在下方的

中，search也将被该指令的内容所替换。

有什么想法吗？

更新 这是一个基本的jsFiddle，代表了我遇到的问题-请注意第三个

未显示。

- jwest

---

你是不是想写成</div search>而不是<div search/>？ - Victor Grazi

Answer 1

我在这里创建了一个fiddle链接。

这些是指令。

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

在这里，你需要进行动态加载

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

看看这是否有帮助并解决了你的问题。我将每个指令制作成模板，然后使用ng-include。

- Chandermani

---

太完美了！非常感谢。如果我能给你一个虚拟的金星，我一定会的。而且这是一个漂亮优雅的解决方案。 - jwest

Answer 2

请尝试使用这个示例 http://jsfiddle.net/xpKwb/12/

您可以使用ngSwitch

<div ng-repeat='template in inner'>
    <div ng-switch on="template">
        <div ng-switch-when="one">
            <div class='one'></div>
        </div>
        <div ng-switch-when="two">
            <div class='two'></div>

        </div>
    </div>

- ankush

---

这不是同时创建模板并仅操作它们的可见性吗？ - epeleg