angularjs - g-tag does not work when used in replace directive -
this code:
app.js
var app = angular.module('plunker', []); app.controller('mainctrl', function($scope) { $scope.name = 'world'; }); // directive replaces <g> tag app.directive('hexagonreplace', function(){ return { templateurl: 'hexagonreplace.html', restrict: 'e', replace: true, scope:{ dx: '=', dy: '=' } }; }); // directive appends <g> tag polygon forming hexagon app.directive('hexagonappend', function(){ return { templateurl: 'hexagonappend.html', restrict: 'a' }; }); hexagonreplace.html
<g class='hexagon' ng-attr-transform='translate({{dx}},{{dy}})'> <polygon points="21.65063509461097,-12.499999999999998 21.65063509461097,12.499999999999998 1.5308084989341915e-15,25 -21.65063509461097,12.499999999999998 -21.65063509461097,-12.499999999999993 -4.592425496802574e-15,-25"> </polygon> </g> hexagonappend.html
<polygon points="21.65063509461097,-12.499999999999998 21.65063509461097,12.499999999999998 1.5308084989341915e-15,25 -21.65063509461097,12.499999999999998 -21.65063509461097,-12.499999999999993 -4.592425496802574e-15,-25"> </polygon> index.html
<!doctype html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> <script src="app.js"></script> </head> <body ng-controller="mainctrl"> <svg width=100 height=100> <!-- hexagon not shown --> <hexagon-replace dx=50 dy=50></hexagon-replace> <rect class='outline' width=100 height=100></rect> </svg> <svg width=100 height=100> <!-- hexagon looks same in resulting html displayed --> <g class='hexagon' transform='translate(50,50)' hexagon-append></g> <rect class='outline' width=100 height=100></rect> </svg> </body> </html> style.css
/* put css in here */ .hexagon { stroke: black; fill: pink; } .outline { fill: none; stroke: black; } try out @ http://plnkr.co/edit/lzet3cmrth2uhtsfcity
i'd create svg element several hexagons. in order clean code , reduce redundancy, i'd have 'hexagon' element can put svg-node. unfortunately not work expected.
when hexagon-node replaced template, polygon-subnode seems inactive reason.
if use 'hexagon' directive add polygon-node existing g-node works fine. not preferred solution since in case have redundant attributes each g-node.
any ideas?
edit: noticed in firefox both not show up. whereas in chromium behavior described.
2nd edit: 2 seem related... first 1 answers question.
different approach then.
including svg template in angularjs directive
how make chrome redraw svg dynamically added content?
Comments
Post a Comment