一尘不染

AngularJS-如何使用带有动态子指令的指令

angularjs

确实为此感到挣扎-尝试了我能想到的所有方法。希望有人可以提供帮助。

我有一条指令可以为我创建自定义控件的轮廓。定制控件的中心部分将由另一个动态生成的指令表示,该指令基于外部指令上的作用域变量的值。作用域变量包含内部指令的名称。我这样做是因为我的页面将包含多个动态生成的元素,这些元素均具有相同的布局,但内部内容不同。

即我的外部指令的示例:

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

{{inner}}设置为另一个指令的名称-在这种情况下search。因此,我的页面应变为:

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

search在较低DIV也被在该指令的内容所取代。

有任何想法吗?

更新
这是代表我遇到的问题的基本jsFiddle-请注意,不会显示第三个div。


阅读 199

收藏
2020-07-04

共1个答案

一尘不染

在这里制造了一个小提琴。

这些是指令。

<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

2020-07-04