AngularJS - 在没有 jQuery 的指令中将 HTML 元素添加到 dom
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19488803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - add HTML element to dom in directive without jQuery
提问by dorjeduck
I have an AngularJS directive in which I want to add a svg tag to the current element of the directive. Right now I do this with the help of jQuery
我有一个 AngularJS 指令，我想在其中向指令的当前元素添加一个 svg 标签。现在我在 jQuery 的帮助下做到这一点
link: function (scope, iElement, iAttrs) {
var svgTag = $('<svg width="600" height="100" class="svg"></svg>');
$(svgTag).appendTo(iElement[0]);
...
}
Yet I don't want the directive to depend on jQuery for this simple task. How would I accomplish the same with AngularJS means (or native JavaScript code).
但是我不希望指令依赖 jQuery 来完成这个简单的任务。我将如何使用 AngularJS 方法（或原生 JavaScript 代码）完成同样的任务。
回答by Cherniv
Why not to try simple (but powerful) html()method:
为什么不尝试简单（但功能强大）的html()方法：
iElement.html('<svg width="600" height="100" class="svg"></svg>');
Or appendas an alternative:
或者append作为替代：
iElement.append('<svg width="600" height="100" class="svg"></svg>');
And , of course , more cleaner way:
而且，当然，更清洁的方式：
var svg = angular.element('<svg width="600" height="100" class="svg"></svg>');
iElement.append(svg);
回答by Dzung Nguyen
In angularJS, you can use angular.element which is the lite version of jQuery. You can do pretty much everything with it, so you don't need to include jQuery.
在 angularJS 中，您可以使用 angular.element，它是 jQuery 的精简版。你可以用它做几乎所有的事情，所以你不需要包含 jQuery。
So basically, you can rewrite your code to something like this:
所以基本上，你可以将代码重写为这样的：
link: function (scope, iElement, iAttrs) {
var svgTag = angular.element('<svg width="600" height="100" class="svg"></svg>');
angular.element(svgTag).appendTo(iElement[0]);
//...
}
回答by Pavel
You could use something like this
你可以使用这样的东西
var el = document.createElement("svg");
el.style.width="600px";
el.style.height="100px";
....
iElement[0].appendChild(el)
回答by Freezystem
If your destination element is empty and will only contain the <svg>tag you could consider using ng-bind-htmlas follow :
如果您的目标元素为空并且仅包含<svg>您可以考虑使用的标签ng-bind-html，如下所示：
Declare your HTML tag in the directive scope variable
在指令范围变量中声明您的 HTML 标记
link: function (scope, iElement, iAttrs) {
scope.svgTag = '<svg width="600" height="100" class="svg"></svg>';
...
}
Then, in your directive template, just add the proper attribute at the exact place you want to append the svg tag :
然后，在您的指令模板中，只需在要附加 svg 标签的确切位置添加适当的属性：
<!-- start of directive template code -->
...
<!-- end of directive template code -->
<div ng-bind-html="svgTag"></div>
Don't forget to includengSanitizeto allow ng-bind-htmlto automatically parse the HTML string to trusted HTML and avoid insecure code injection warnings.
不要忘记包含ngSanitize以允许ng-bind-html自动将 HTML 字符串解析为受信任的 HTML 并避免不安全的代码注入警告。
See official documentationfor more details.
