在AngularJS指令中呈现SVG模板
在AngularJS指令中呈现SVG模板
提问于 2013-10-24 22:04:01
我正在做一个使用SVG和angular.js的大型项目，需要对svg指令模板的坚实支持。不幸的是，当angular呈现模板时，它会创建DOM节点，而不是SVG节点。我目前的工作是使用jquery.svg自己管理节点的创建和删除，但这是有限制的。示例：http://plnkr.co/edit/Xk8wM3?p=preview
我希望指令element是真正的svg元素，而不是什么都不做的假DOM元素。这将使我能够有效地使用ng重复和角度过滤器。
下面是需要修复的问题：http://plnkr.co/edit/BPvGjf?p=preview
html
<svg>
<!--woot this one works-->
<shape d="M0,0L250,0L250,250L0,250z" fill="green"></shape>
<!--nesting directives doesn't work-->
<group>
<shape d="M0,0L150,0L150,150L0,150z" fill="red"></shape>
<shape d="M0,0L100,0L100,100L0,100z" fill="orange"></shape>
</group>
<!--ng repeat doesn't work-->
<shape d="{{square.path}}" fill="{{square.color}}" ng-repeat="square in squares | orderBy:'order'"></shape>
</svg>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('<svg id="factory"></svg>').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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2013-10-26 05:47:17
我已经叉子和更新您的柱塞，使其工作here。您的函数'makeNode‘有时会抛出错误，当有问题的节点通过角度与文档分离以进行处理时。使用0毫秒的超时会使执行延迟到足以使父节点可用。此外，我使用链接函数来执行所有操作，因为compile函数在每个ng-repeat中只执行一次，但我们需要它重复执行多次。你可以在Angular Directive页面上的“编译和链接之间的区别”部分了解更多关于编译和链接函数之间的区别的信息。
相关代码如下：
/* Create a shape node with the given settings. */
function makeNode(name, element, settings) {
var ns = 'http://www.w3.org/2000/svg';
var node = document.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);
}
}
return node;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19568226
复制相关文章
相似问题