AngularJS & D3 : D3 多次加载的 Angular 指令答案

【问题标题】：AngularJS & D3 : Angular directive for D3 load multiple timesAngularJS & D3 : D3 多次加载的 Angular 指令
【发布时间】：2014-05-18 06:54:09
【问题描述】：

我为 d3 强制有向图编写了一个角度指令。 Code is here. 我使用 $log.log("xx");调试代码。由于某种原因，我意识到该指令多次加载。对于与指令绑定的 mg 控制器，我有 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 是空的，“[]”和“标签”是未定义的。我在<forcedirected-graph tags="tags" style="overflow: hidden;"></forcedirected-graph> 的视图中传递了“标签” 我真的无法理解为什么该函数无法获取参数。这就是为什么我愚蠢地使用$scope.fdg.function()... 来包装这两个函数，以便它们可以访问从视图传递的参数。

我还有一些其他 (d3) 指令可以正常加载。我尝试使异常 d3 指令的模板与那些工作指令相匹配，但我失败了:(（我对参数/范围在指令链接中的实际工作方式感到困惑）。

更多完整代码：here 和 here。

如果我能找出问题所在，那就太好了，这样我就可以更深入地了解 Angular。 Angular 真的很棒:)

提前致谢！

【问题讨论】：

标签： javascript angularjs d3.js dependency-injection angular-directive

【解决方案1】：

您是否在某处使用 ng-repeat？
我记得意识到链接函数 get 对 ng-repeat 中的每个元素执行了多次。所以也许在这种情况下，最好使用 compile 函数。检查这篇文章： http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/

【讨论】：