I'm trying to add dynamically a custom element whenever users click on button, which will render an SVG cube via D3.js code.
I've added an ng-click directive to a button element that invokes a function to dynamically append a custom cube element, and then I invoke $rootScope.$apply() in order to 'apply' the custom directive, but that does not work.
Here's the complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS, directives, and D3.js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="MyController as svgc">
<button ng-click="svgc.addCube()">Add a Cube</button><br/>
<cube></cube>
<script>
var myapp = angular.module('myapp', []);
myapp.controller("MyController", function($rootScope) {
var svgc = this;
svgc.addCube = function() {
//var cube = angular.element('cube');
var cube = document.createElement('cube');
document.body.appendChild(cube);
$rootScope.$apply();
}
});
myapp.directive('cube', function() {
function link(scope, el, attr) {
// d3.select(el[0]).append('svg');
el = el[0];
// CUSTOM CODE FOR RENDERING A CUBE
var width = 300, height = 300;
var points1 = "50,50 200,50 240,30 90,30";
var points2 = "200,50 200,200 240,180 240,30";
var fillColors = ["red", "yellow", "blue"];
var svg = d3.select(el)
.append("svg")
.attr("width", width)
.attr("height", height);
// top face (parallelogram)
var polygon = svg.append("polygon")
.attr("points", points1)
.attr("fill", fillColors[1])
.attr("stroke", "blue")
.attr("stroke-width", 1);
// front face (rectangle)
svg.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 150)
.attr("height", 150)
.attr("fill", fillColors[0]);
// right face (parallelogram)
var polygon = svg.append("polygon")
.attr("points", points2)
.attr("fill", fillColors[2])
.attr("stroke", "blue")
.attr("stroke-width", 1);
}
return {
link: link,
restrict: 'E'
}
});
</script>
</body>
</html>
I've seen examples on stackoverflow that use templates for adding custom elements, but this scenario requires the dynamic generation of SVG elements via D3, so I don't see how a template-based solution would work.
I'm sure the solution is simple...suggestions are welcome:)
I fiddled with the code and came up with this solution: