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)