Javascript AngularJS-在指令中向dom添加HTML元素而不使用jQuery

我有一个AngularJS指令，我想在该指令的当前元素中添加一个svg标记。现在，我在jQuery的帮助下完成了这项工作

link: function (scope, iElement, iAttrs) {

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

    ...
    }

链接：功能（范围、IELENT、iAttrs）{
var svgTag=$（''）；
$（svgTag）.appendTo（iElement[0]）；
...
}

---

然而，我不希望指令依赖jQuery来完成这个简单的任务。我如何使用AngularJS means（或本机JavaScript代码）实现同样的功能。

您可以使用类似的功能

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

为什么不尝试简单（但功能强大）

html（）

方法：

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

当然，还有更干净的方式：

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

var svg=angular.element（“”）；
附加（svg）；

---

Fiddle:

在angularJS中，可以使用angular.element，它是jQuery的lite版本。你可以用它做几乎所有的事情，所以你不需要包括jQuery

因此，基本上，您可以将代码重写为以下内容：

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

链接：功能（范围、IELENT、iAttrs）{
var svgTag=角度元素（“”）；
角元素（svgTag）.appendTo（IEElement[0]）；
//...
}
< /代码> 如果您的目标元素是空的，只包含<代码> <代码>标签，您可以考虑使用<代码> NG绑定HTML>代码>如下：

在指令范围变量中声明HTML标记

link: function (scope, iElement, iAttrs) {

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

    ...
}

链接：功能（范围、IELENT、iAttrs）{
scope.svgTag=''；
...
}

然后，在指令模板中，只需在要附加svg标记的确切位置添加适当的属性：

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


...

别忘了包括
ngSanitize
以允许
ng bind html
自动将html字符串解析为受信任的html并避免不安全的代码注入警告

有关更多详细信息。
感谢pavel的回答。我试过了，但我得到的只是dom中的“”，没有您需要的Element.style.widthKayo的宽度、高度属性（在google chrome中）。我刚试过el.style.width=600；但是仍然没有成功，我猜我误解了你的回答。style.width='600px'谢谢你，这是angularjs的新功能。。。谢谢again@dorjeduck不客气，请看一下我附加的JSFIDLE链接，但它没有附加角链接controlls@MuneemHabib，它仅对原始html有用。否则，您需要使用
$compile
：非常感谢nXqd，它确实做到了。（我已经接受了Cherniv的回答…）谢谢你向我指出这个可能性，我相信这对更复杂的东西会有帮助…顺便说一句，如果你需要压缩每个ms，你应该使用html的本机函数，但希望它能跨浏览器工作。顺便说一句，您可以不接受它：P[只是开玩笑]angular.element没有.appendTo..，但它有append，所以只需切换父/子情境以预结束
angular.element（svgTag）.prependTo（iElement[0]）。谢谢@nXqd
<!-- start of directive template code -->
...
<!-- end of directive template code -->
<div ng-bind-html="svgTag"></div>