javascript - AngularJS & D3 : Angular directive for D3 load multiple times -

i wrote angular directive d3 forced-directed graph. code here. use $log.log("xx"); debug code. realized reasone directive load multiple times. mg-controller, 1 directive bond with, have 2 factories , these 2 factories called whenever controller initialized. using $log.log("xx"); realized when pay loaded, d3 directive @ least load 6 times, twice each factory , twice after. way "got around" using d3.select("svg") .remove(); page won't have duplicates svgs. highly affects performance. beside, added costumed filter in same page under same controller, , noticed whenever filter runs, d3 directive reload. filter has not thing d3 directive, except under same controller.(i don't think controller reload when filter runs.)

i believe issue in link: function part. seems messy 2 things: 1) generates data feed d3 2)do d3 , generates graph.

template:'<div>{{fdg()}}<div>',             link: function ( $scope, $element,attr){                              ...                         $scope.fdg = function(){                             $log.log("in function");                             $scope.getlinks();                             forcedirectedgraph($scope.tags,$scope.links);                         } 

i put 2 functions $scope.fdg , invoke in template:'<div>{{fdg()}}<div>'. bad practice, couldn't figure out other ways invoke function.

i tried invoke these 2 functions

 $scope.getlinks();  forcedirectedgraph($scope.tags,$scope.links); 

directly in link: function this:

link: function ( $scope, $element,attr){                             $log.log($scope.tags);                             $log.log(tags);                             $scope.getlinks();                             forcedirectedgraph($scope.tags,$scope.links); 

strangely, $scope.tags empyty, "[]" , 'tags' undefined. passed 'tags' in view <forcedirected-graph tags="tags" style="overflow: hidden;"></forcedirected-graph> not understand why function not argument. that's why stupidly use $scope.fdg.function()... wrap these 2 functions reach argument passed view.

i have other (d3) directives loads normally. try make template of abnormal d3 directive match working directives, failed :( (i confused how arguments/scope works in directive link).

more completed codes: here , here.

it great if figure out what's wrong gain deeper understanding in angular. angular awesome :)

thanks in advance!

are using ng-repeat somewhere?
remember realising link-function get´s executed multiple times each element in ng-repeat. maybe in case it´s better use compile function instead. check article: http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/