In my application, I have created a custom directive that utilizes D3.js. The goal is to trigger an API call to fetch more data when a user clicks on a node within the D3 visualization. This involves accessing the data linked to the clicked node and sending it back to the controller. The controller then manages the process of fetching additional data.
My current focus is on logging the data of the clicked node in my controller. However, I am encountering an issue where this data is showing as undefined in the controller.
Here is the relevant code snippet from the directive:
angular.module('gameApp')
.directive('gmLinkAnalysis', gmLinkAnalysis);
gmLinkAnalysis.$inject = ['$location', 'd3'];
function gmLinkAnalysis($location, d3) {
var directive = {
restrict: 'E',
templateUrl: '/app/gmDataVis/gmLinkAnalysis/gmLinkAnalysis.directive.html',
scope: {
data: '=',
logNode: '&'
},
link: function(scope) {
...
function click(d) {
scope.logNode(d);
}
}
};
return directive;
}
HTML:
<gm-link-analysis data="connections.users" log-node="connections.logNode(d)"></gm-link-analysis>
Below is the relevant section from the controller code:
angular.module('gameApp')
.controller('ConnectionsController', ConnectionsController);
function ConnectionsController() {
var vm = this;
...
vm.logNode = function(d) {
console.log(d);
};
}
When I replace d in the HTML with a string like "hello world" (
log-node="connections.logNode('hello world')"