如何將錨元素附加到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>

這里的問題是 angular 不想注入原始 HTML，對嗎？ 所以你可以使用 $sce 來完成（ AngularJS：Insert HTML into view ）

但問題是，您能否將 URL 注入到 div 中已經存在的錨標記中？ 像這樣：

// 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"));