Currently, I am developing an Angular application that involves a controller named visualization and a directive named force-layout.
Within the HTML template of the directive, I have implemented three buttons with corresponding functions attached to them. These functions are defined in the directive code:
<div class="panel smallest controls">
<span ng-click="centerNetwork()"><i class="fa fa-arrows-alt" aria-hidden="true"></i></span>
<span ng-click="zoomIn()"><i class="fa fa-search-plus" aria-hidden="true"></i></span>
<span ng-click="zoomOut()"><i class="fa fa-search-minus" aria-hidden="true"></i></span>
</div>
<force-layout ng-if=" config.viewMode == 'individual-force' || config.viewMode == 'individual-concentric' "></force-layout>
Here is how the functions are defined within the directive:
scope.centerNetwork = function() {
console.log("Recenter");
var sourceNode = nodes.filter(function(d) { return (d.id == sourceId)})[0];
svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity.translate(width/2-sourceNode.x, height/2-sourceNode.y));
}
var zoomfactor = 1;
scope.zoomIn = function() {
console.log("Zoom In")
svg.transition().duration(500).call(zoom.scaleBy, zoomfactor + .5);
}
scope.zoomOut = function() {
console.log("Zoom Out")
svg.transition().duration(500).call(zoom.scaleBy, zoomfactor - .25);
}
Previously, everything was functioning correctly, but now it seems to have stopped working without any apparent reason. Can anyone provide assistance in identifying the issue?
UPDATE: Full directive code is provided below.
'use strict';
/**
* @ngdoc directive
* @name redesign2017App.directive:forceLayout
* @description
* # forceLayout
*/
angular.module('redesign2017App')
.directive('forceLayout', function() {
return {
template: '<svg width="100%" height="100%"></svg>',
restrict: 'E',
link: function postLink(scope, element, attrs) {
console.log('drawing network the first time');
// Additional directive code has been omitted for brevity
}
};
});