AngularJS – 在没有jQuery的指令中添加HTML元素

我有一个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

为什么不尝试简单（但function强大）的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 ，如下所示：

在指令作用域variables中声明你的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自动将HTMLstringparsing为可信的HTML，并避免不安全的代码注入警告。

查看官方文档以获取更多详细信