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

问题描述

真的很挣扎 - 尝试了我能想到的所有方法.希望有人能提供帮助.

我有一个指令可以为我创建自定义控件的轮廓.自定义控件的中心部分将由一个进一步动态生成的指令表示，该指令基于外部指令上的范围变量的值.scope 变量包含内部指令的名称.我这样做是因为我的页面将有多个动态生成的元素，所有元素都具有相同的布局但内部内容不同.

即我的外部指令的一个例子:

<!-- 这里的 div 内容 ---><div {{inner}}/>

{{inner}} 设置为进一步指令的名称 - 在本例中为 search.因此，我的页面应该变成:

<!-- 这里的 div 内容 ---><div 搜索/>

在较低的 div 上使用 search 也被该指令的内容替换.

有什么想法吗?

更新这是一个基本的 jsFiddle 代表我遇到的问题 - 注意第三个 div 没有显示.

解决方案

我在这里创建了一个小提琴.

这些是指令.

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

在这里你做动态加载

看看这是否对您有帮助，并解决了您的目的.我将每个指令制作成一个模板，然后使用 ng include

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

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 />

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

Any ideas?

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

解决方案

I have create a fiddle here.

These are the directives.

<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屋！