AngularJS - добавить элемент HTML в dom в директиве без jQuery

У меня есть директива 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).

Ответ 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);

Fiddle: http://jsfiddle.net/cherniv/AgGwK/

Ответ 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]);
  //...
}

Ответ 3

Вы можете использовать что-то вроде этого

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

Ответ 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 и избегать предупреждений о ненадежном вводе кода.

Подробнее см. официальную документацию.