angular 指令渲染_在AngularJS指令中渲染SVG模板

我正在使用SVG和angular.js进行大型项目，并且需要对svg指令模板的坚实支持。不幸的是，当angular渲染模板时，它将创建DOM节点，而不是SVG节点。我当前的解决方法是使用jquery.svg自己管理创建和删除节点，但是它受到限制。示例：http：//plnkr.co/edit/Xk8wM3？p

= preview

我想让指令element成为实际的svg元素，而不是一些没有任何实际作用的人造DOM元素。这将使我有效地使用ng-repeat和angular过滤器。

这是需要修复的插件：http

://plnkr.co/edit/BPvGjf?p=preview

html

javascript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

$scope.squares = [{

path: "M0,0L50,0L50,50L0,50z",

color: 'blue',

order: 2

}, {

path: "M0,0L75,0L75,75L0,75z",

color: 'purple',

order: 1

}];

});

app.directive('group', function($compile) {

return {

restrict: 'E',

transclude: true,

compile: function(tElement, tAttr, transclude) {

var path = makeNode('g', tElement, tAttr);

tElement.append(path.cloneNode(true));

return function(scope, element) {

transclude(scope, function(clone, innerScope) {

element.append($compile(clone)(innerScope));

})

}

}

}

});

app.directive('shape', function() {

return {

restrict: 'E',

compile: function(tElement, tAttr) {

var path = makeNode('path', tElement, tAttr);

tElement.replaceWith(path.cloneNode(true));

return function(scope, element) {

}

}

}

})

/* Create a shape node with the given settings. */

function makeNode(name, element, settings) {

var svg = $(element).parents('svg')[0];

var parent = $(element).parent()[0];

var factory = $('#factory')[0] || $('body').append('').find('#factory')[0];

var ns = 'http://www.w3.org/2000/svg';

// I've tried using the factory here to create the node then clone

// it into the new svg, but since angular nodes are created child-first, it didn't work

var node = parent.ownerDocument.createElementNS(ns, name);

for (var attribute in settings) {

var value = settings[attribute];

if (value !== null && value !== null && !attribute.match(/\$/) &&

(typeof value !== 'string' || value !== '')) {

node.setAttribute(attribute, value);

}

}

parent.appendChild(node);

return node;

}