<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title></title>
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
<!--<script data-require="lodash.js@1.3.1" data-semver="1.3.1" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>-->
<!--<script src="http://keith-wood.name/js/jquery.svg.js"></script>-->
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>
-- sanity check --
<hello><world></world></hello>
</p>
<p>
-- expected --
<svg style="height:300px">
<path d="M0,0L250,0L250,250L0,250z" fill="green"></path>
<g>
<path d="{{square.path}}" fill="{{square.color}}" ng-repeat="square in squares2 | orderBy:'order'"></path>
</g>
<path d="{{square.path}}" fill="{{square.color}}" ng-repeat="square in squares | orderBy:'order'"></path>
</svg>
</p>
<p>
-- should look the same --
<svg style="height:300px">
<!--woot this one works-->
<shape d="M0,0L250,0L250,250L0,250z" fill="green"></shape>
<!--nesting directives doesn't work-->
<group data-trace>
<shape d="{{square.path}}" fill="{{square.color}}" ng-repeat="square in squares2 | orderBy:'order'"></shape>
</group>
<!--ng repeat doesn't work-->
<shape d="{{square.path}}" fill="{{square.color}}" ng-repeat="square in squares | orderBy:'order'"></shape>
</svg>
</p>
</body>
</html>
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
}];
$scope.squares2 = [{
path: "M0,0L150,0L150,150L0,150z",
color: 'red',
order: 0
}, {
path: "M0,0L100,0L100,100L0,100z",
color: 'orange',
order: 1
}];
});
app.directive('hello', function($compile) {
return {
restrict: 'E',
transclude: true,
compile: function(tElement, tAttr, transclude) {
return function(scope, element) {
transclude(scope.$parent, function(clone) {
var newElement = $('<div>Hello </div>');
newElement.append(clone);
element.replaceWith(newElement);
});
}
}
}
});
app.directive('world', function() {
return {
restrict: 'E',
compile: function(tElement, tAttr) {
return function(scope, element) {
element.replaceWith('<span>World</span>');
}
}
}
})
app.factory('fixSvgTag', function ($q, $timeout) {
/* 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 (!attribute.match(/\$/)) {
node.setAttribute(attribute, value);
}
}
return node;
}
return function fixSvgTag(name, lElement, lAttr) {
var deffer = $q.defer()
$timeout(function () {
var newNode = $(makeNode(name, lElement, lAttr));
deffer.resolve(newNode);
lElement.replaceWith(newNode.append(lElement.children()));
});
return deffer.promise;
};
});
app.directive('group', function(fixSvgTag, $compile) {
return {
restrict: 'E',
link: function(scope, lElement, lAttr) {
fixSvgTag('g', lElement, lAttr).then(function (lElement) {
console.log({lElement:lElement});
});
}
}
});
app.directive('shape', function(fixSvgTag) {
return {
restrict: 'E',
link: function(scope, lElement, lAttr) {
fixSvgTag('path', lElement, lAttr).then(function (lElement) {
console.log({lElement:lElement});
});
}
}
});