Hi, I'm trying to make my own component for displaying D3.js graphics from a database table.
I can get the graphs to display, but not to get links to work. I want to execute methods when users click certain items in the graphs (D3.js executes to produce SVG graphics, so the links are on SVG nodes). I have tried adding 'svy-click' attributes and added a $compile directive to .js file of the compoent.
HTML:
- Code: Select all
<div class="d3-body" style="width: 100%; height: 100%; background: white;">
<div dynamic="model.html"></div>
</div>
JS:
- Code: Select all
angular.module('samplegraphD3simple',['servoy']).directive('samplegraphD3simple', function() {
return {
restrict: 'E',
scope: {
model: "=svyModel",
api: "=svyApi",
svyServoyapi: "=",
handlers: "=svyHandlers"
},
controller: function($scope, $element, $attrs) {
$scope.click = function(arg) {
console.log('Clicked ' + arg);
}
$scope.showAlert = function(message) {
alert(message);
console.log("alerted!");
};
},
templateUrl: 'samplegraph/d3simple/d3simple.html',
replace: true
}
}) .directive('dynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
scope: { dynamic: '=dynamic'},
link: function postLink(scope, element, attrs) {
scope.$watch( 'dynamic' , function(html){
element.html(html);
$compile(element.contents())(scope);
console.log("complied!");
});
scope.showAlert = function(message) {
alert(message);
console.log("alerted!");
};
}
};
});
I can see the "compiled!" messages in the console.
Any ideas of what may be wrong?