-->

AngularJS&D3:为D3负荷多次角指令(AngularJS & D3 : Angular d

2019-10-20 03:18发布

我写了D3强制向图的角度指令。 代码是在这里。 我使用$ log.log( “XX”); 调试代码。 我意识到,对于一些reasone这个指令加载多次。 对于毫克控制器,所述一个指令键以,我有2个工厂和每当所述控制器被初始化这两个工厂被调用。 通过使用$log.log("xx"); 该买单的时候被加载,D3指示至少负载6次,两次,每次工厂和后两次我才意识到。 我“得到了各地”的方法是使用d3.select("svg") .remove(); 所以我的页面不会有重复svgs。 但是,这极大地影响了性能。 除此之外,我加在同一页面中的一些打扮过滤同一控制下,我注意到每当过滤器运行时,D3指令将重新加载。 该过滤器还没有做的事情与D3指令,但是它们是同一控制下。(我不认为控制器重装过滤器运行时。)

我相信这个问题是我的link: function部分。 这似乎混乱,但它实际上只是做了两两件事:1)产生的数据将被馈送到D3 2)做一些D3和生成的图表。

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

我把两个函数到$scope.fdg并调用它template:'<div>{{fdg()}}<div>' 。 这可能是一个非常不好的做法,但我想不出其他的方法来调用函数。

我试图调用这两个函数

 $scope.getLinks();
 ForceDirectedGraph($scope.tags,$scope.links);

直接在link: function是这样的:

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

奇怪的是, $scope.tags是empyty, “[]”和'标签'是不确定的。 我有鉴于通过“标签” <forcedirected-graph tags="tags" style="overflow: hidden;"></forcedirected-graph>我真的不明白为什么功能不能得到论证。 这就是为什么我愣神使用$scope.fdg.function()...来包装这两个功能,使他们能够达到从视图中传递的参数。

我有一些其他的(D3)指令是正常加载。 我尽量让异常D3指令匹配工作指令的模板,但我失败了:((我对如何参数/范围实际上是在向链路作品混淆)。

更多完成代码: 这里和这里 。

这将是巨大的,如果我能想出什么是错的,所以我可以得到在角度更深入的了解。 角是真正真棒:)

提前致谢!

Answer 1:

您使用的是NG重复的地方?
我记得我意识到链接功能get's执行多次在NG-重复每个元素。 因此,也许在这种情况下it's最好使用编译函数。 检查这篇文章: http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/



文章来源: AngularJS & D3 : Angular directive for D3 load multiple times