AngularJS轉換鏈接到鏈接標籤

我有一個關於AngularJS並解釋我的問題是由下面的例子中唯一辦法一個簡單的問題：AngularJS轉換鏈接到鏈接標籤

我有一個控制器和控制器中我有對象的列表。每個對象都有一個實際鏈接到另一個頁面的屬性。但是，使用ng-repeat時，可以使用以下結構，以便鏈接可以轉換爲標籤？

<a href="{{object.linkProperty}}"> {{object.name}} <</a>

具有相同含義的另一個問題是：例如，如果該對象containes，我謹代表作爲表我怎麼能做到這一點的屬性？換句話說：

listOfObjects = [ 
    { name: "bla" 
     info: "<table> some data </table>" 
    } 
    { name: "blaTwo" 
     info: "<table> some data </table>" 
    } 
]

我知道，如果我用NG-重複ABD {{object.info}}它woud給我的字符串，它不會將其轉換爲一個HMTL標籤。但是，我想將其轉換爲HTML標記。我知道模板用於這個，但我不知道如何在對象中使用模板。

非常感謝您提前提供任何幫助！ =）

來源

2015-10-04 Muninmuni

'ng-bind-html' with'$ sce.trustedAsHtml' will do the trick http://stackoverflow.com/a/32269118/2435473 –

@Polly你也可以使用你的html作爲模板指令。這是使用'$ compile'服務來動態編譯html。但根據你的用例，Pankaj Parkar說ng-bind-html可能會更好。 https://docs.angularjs.org/api/ng/service/$compile – ste2425

對於第一個問題，是的，但你應該使用ng-href。

<a ng-href="{{object.linkProperty}}"> {{object.name}} </a>

ngHref將等待，直到它的所有數據將最終HREF的標籤，防止陌生邊緣的情況下，人們點擊鏈接之前就準備好了。這通常不是hrefs上的問題（但仍然是最佳做法），但類似的圖像ng-src對於在角度插入正確的src之前停止損壞的圖像以使其閃爍非常有用。

對於sectond問題，您可以使用ng-bind-html和$ sce.trustedAsHtml作爲註釋中提到的內容，也可以在重複內部使用模板。

<table> 
    <tr ng-repeat="object in listOfObjects"> 
     <td>{{object.name}}</td> 
     <td>{{object.moreProperties}}</td> 
    </tr> 
</table>

我會說這是大多數時候更好的方法。當使用ng-bind-html時，您不僅可以讀取模板並查看結果，那麼只有在內容真正未知時（例如從後端發送）才能使用該解決方案，這樣更容易且更具可讀性。如果你知道它應該有的結構，把它寫在模板中。

來源

2015-10-04 21:14:50

AngularJS轉換鏈接到鏈接標籤

回答

相關問題