AngularJS - 在没有jQuery的指令中将HTML元素添加到dom中

Question

我有一个AngularJS指令，我想在其中添加一个svg标签到指令的当前元素。 现在我在jQuery的帮助下做到这一点

link: function (scope, iElement, iAttrs) {

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

    ...
    }

但我不希望该指令依赖于jQuery来完成这个简单的任务。 我将如何使用AngularJS意味着（或本机JavaScript代码）完成相同的操作。

Answer 1

为什么不尝试简单（但功能强大）的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/

Answer 2

在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]);
  //...
}

Answer 3

你可以使用这样的东西

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

Answer 4

如果目标元素为空并且只包含<svg>标记，则可以考虑使用ng-bind-html ，如下所示：

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

link: function (scope, iElement, iAttrs) {

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

    ...
}

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

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

不要忘记包含 ngSanitize以允许ng-bind-html自动将HTML字符串解析为可信HTML并避免不安全的代码注入警告。

有关详细信息， 请参阅官方文档