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

AngularJS - add HTML element to dom in directive without jQuery

本文关键字：jQuery 指令 dom HTML 元素 添加 AngularJS      更新时间：2023-09-26

我有一个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代码）完成相同的任务。

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

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

你可以使用这样的东西

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

如果您的目标元素为空并且仅包含 <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，并避免不安全的代码注入警告。

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

相关文章：