javascript - 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 方法(或 native 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);

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