40

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

4

4 回答 4

57

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

于 2013-10-21T07:56:10.567 回答
16

在 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]);
  //...
}
于 2013-10-21T08:05:08.923 回答
6

你可以使用这样的东西

var el = document.createElement("svg");
el.style.width="600px";
el.style.height="100px";
....
iElement[0].appendChild(el)
于 2013-10-21T07:50:19.843 回答
2

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

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

于 2015-10-13T16:19:07.487 回答