真的在努力奋斗 - 尝试过各种我能想到的方式。希望有人可以提供帮助。
我有一个指令,为我创建自定义控件的轮廓。自定义控件的核心部分将由另一个动态生成的指令表示,该指令基于外部指令上的作用域变量的值。 scope变量包含inner指令的名称。我这样做是因为我的页面将有多个动态生成的元素,所有元素都具有共同的布局但内部内容不同。
即。我的外部指令的一个例子:
<div data-inner="{{inner}}">
<!-- div content here --->
<div {{inner}} />
{{inner}}
设置为另一个指令的名称 - 在本例中为search
。因此,我的页面应该成为:
<div data-inner="search">
<!-- div content here --->
<div search />
下部div上的search
也被该指令的内容替换。
有什么想法吗?
更新 这是一个代表我所遇问题的基本jsFiddle - 注意不显示第三个div。
答案 0 :(得分:14)
我创造了一个小提琴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>
在这里你做动态加载
<div ng-repeat='template in inner' ng-include='template'></div>
看看这对你有帮助,并解决你的目的。我将每个指令制作成模板,然后使用ng include
答案 1 :(得分:3)
试试这个小提琴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>