[英]Setting angular directive name via model value
我有一個基於值的循環,我需要指定一個特定的指令。 這是我所擁有的:
<div ng-repeat="w in row.widgets" class="col-md-{{12/row.widgets.length}}">
<{{w.type}}>
</{{w.type}}>
</div>
事實是,我已經設置了匹配的指令,但是標記輸出很簡單,而不是實際調用該指令
<widget-directive-one>
<widget-directive-two>
<widget-directive-three>
我不明白為什么不輸出實際值,它不會調用相同名稱的指令。 任何建議將不勝感激!
屬性名稱和標簽名稱不能在dom本身(視圖)中動態生成。
Angular需要能夠解析dom中的元素,並將現有標簽名稱或屬性與這些指令進行比較
有很多方法可以解決此問題ng-switch
, ng-if
或返回所需指令標簽的自定義指令是幾個示例
將widgetType添加到控制器$ scope。 然后,您可以執行以下操作:
<div ng-switch="widgetType">
<widget-one ng-switch-when="widgetOne"></widget-one>
<widget-two ng-switch-when="widgetTwo"></widget-two>
<widget-three ng-switch-when="widgetThree"></widget-three>
</div>
使用這個ng-if
<div ng-repeat="w in row.widgets" class="col-md-{{12/row.widgets.length}}">
<widget-directive-one ng-if="$index==0"></widget-directive-one>
<widget-directive-two ng-if="$index==1"></widget-directive-two>
<widget-directive-three ng-if="$index==2"></widget-directive-three>
</div>
使用ng-bind-html
指令:
從文檔中:
ngBindHtml
計算表達式並將生成的HTML以安全的方式插入到元素中。
您也可以繞過消毒處理以獲取已知的安全值。 為此,請通過$ sce.trustAsHtml綁定到顯式信任的值。 請參閱嚴格上下文轉義(SCE)下的示例。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.