AngularJS - 將HTML元素添加到dom中，不含jQuery指令

我有一個AngularJS指令，我想在其中添加一個svg標籤到指令的當前元素。現在我在jQuery的幫助下做到這一點AngularJS - 將HTML元素添加到dom中，不含jQuery指令

link: function (scope, iElement, iAttrs) { 

    var svgTag = $('<svg width="600" height="100" class="svg"></svg>'); 
    $(svgTag).appendTo(iElement[0]); 

    ... 
    }

但我不希望該指令依賴於jQuery這個簡單的任務。我如何完成AngularJS的手段（或原生JavaScript代碼）。

來源

2013-10-21 dorjeduck

爲什麼不嘗試簡單（但功能強大）html()方法：

iElement.html('<svg width="600" height="100" class="svg"></svg>');

或者append作爲一種替代方案：

iElement.append('<svg width="600" height="100" class="svg"></svg>');

而且當然，更清潔的方式：

var svg = angular.element('<svg width="600" height="100" class="svg"></svg>'); 
iElement.append(svg);

小提琴：http://jsfiddle.net/cherniv/AgGwK/

來源

2013-10-21 07:56:10 Cherniv

謝謝你做的伎倆 - 新的angularjs ...再次感謝 – dorjeduck

@dorjeduck你歡迎，看看jsFiddle鏈接，我附上 – Cherniv

但它不是追加角度控制 –

你可以使用類似這樣

var el = document.createElement("svg"); 
el.style.width="600px"; 
el.style.height="100px"; 
.... 
iElement[0].appendChild(el)

來源

2013-10-21 07:50:19 Pavel

謝謝帕維爾的答案。我試過這個，但我得到的是「」在dom中沒有寬度，高度屬性（在谷歌瀏覽器中） – dorjeduck

您需要Element.style.width – Kayo

謝謝Kayo。我剛剛嘗試過el.style.width = 600;但仍然沒有成功，猜我誤解了你的答案 – dorjeduck

在angularJS，你可以使用angular.element這是jQuery的的精簡版的版本。你可以用它做幾乎所有的事情，所以你不需要包含jQuery。

因此，基本上，你可以重寫你的代碼是這樣的：

link: function (scope, iElement, iAttrs) { 
    var svgTag = angular.element('<svg width="600" height="100" class="svg"></svg>'); 
    angular.element(svgTag).appendTo(iElement[0]); 
    //... 
}

來源

2013-10-21 08:05:08 nXqd

非常感謝nXqd，確實如此。（我已經接受了切爾尼夫的回答......）感謝您指出這種可能性對我來說，將有助於更復雜的東西，我相信... – dorjeduck

順便說一句，如果你需要擠壓每個毫秒，你應該使用html的本地功能，但希望它能跨瀏覽器工作。順便說一句，你可以不接受它：P [只是在開玩笑] – nXqd

你的代碼不起作用，但我的確如此：D http://jsfiddle.net/cherniv/78tKx/ – Cherniv

如果你的目標元素是空的，將只包含<svg>標籤，你可以考慮使用ng-bind-html如下：

申報您在指令範圍變量中的HTML標記

link: function (scope, iElement, iAttrs) { 

    scope.svgTag = '<svg width="600" height="100" class="svg"></svg>'; 

    ... 
}

然後，在您的指令模板中，只需添加p埃洛普在屬性要追加的SVG標記的確切地點：

<!-- start of directive template code --> 
... 
<!-- end of directive template code --> 
<div ng-bind-html="svgTag"></div>

不要忘了包括ngSanitize允許ng-bind-html自動解析HTML字符串信任的HTML，避免不安全的代碼注入警告。

See official documentation瞭解更多詳情。

來源

2015-10-13 16:19:07 Freezystem

AngularJS - 將HTML元素添加到dom中，不含jQuery指令

回答

相關問題