divにアンカー要素を追加する方法は？

Question

私はangularjsプロジェクトで働いています。

私は私のコントローラで、この文字列を持っている：

"<a href="http://waze.to/?navigate=yes&ll=72.0274, 564.7814" target="_blank">Open In Waze</a>" 

をそして私は私のテンプレートでこのdiv要素を持っている：それはクリック可能にするために

<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)"><i class="fa fa-car" aria-hidden="true"></div> 

はどのようにdiv要素に上記のアンカー要素を追加することができますか？

Answer 1

これは私に数回も挫折しました。

var htmlStringFromController = "<a href="http://waze.to/?navigate=yes&ll=72.0274, 564.7814" target="_blank">Open In Waze</a>"; 

このように文字列名を埋め込むことができるはずです。

<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)">{{htmlStringFromController}}</div> 

ここでの問題は、角度が生のHTMLを挿入したくないということです。あなたはそれを達成するために$ sceを使うことができます（AngularJS : Insert HTML into view）

しかし、問題は、すでにdivに存在するアンカータグにURLを挿入できますか？このように：

// controller code: 
var URLFromController = "http://waze.to/?navigate=yes&ll=72.0274, 564.7814"; 

これをビューで使用し、URLFromControllerが真実である場合にのみ表示します。

<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)"> 
    <a ng-if="URLFromController" href="{{URLFromController}}" target="_blank">Open in Waze</a> 
</div> 

Answer 2

のdocument.getElementById（ "wazeArea"）のappendChild（一重引用符内のアンカー要素 '「）。

html文字列の作成中に一重引用符を使用できます。エスケープ文字を必要とせずに二重引用符を使用することができます

Answer 3

// 1. get the parent of the div 
// 2. append the anchor to it 
$("#wazeArea").parent().append($(string)); 
// 3. move the div inside of the anchor by appending it 
$("#id_of_a").append($("wazeArea"));