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

Question

我为 d3 强制有向图编写了一个 Angular Directive(指令)。 Code is here.我使用 $log.log("xx");调试代码。我意识到由于某种原因该指令多次加载。对于与指令绑定(bind)的 mg-controller，我有 2 个工厂，每当 Controller 初始化时都会调用这两个工厂。通过使用$log.log("xx");我意识到，当加载工资时，d3指令至少加载6次，每个工厂两次，之后两次。我“四处走动”的方式是使用 d3.select("svg") .remove();所以我的页面不会有重复的 svgs。但这极大地影响了性能。此外，我在同一页面的同一 Controller 下添加了一些定制的过滤器，我注意到每当过滤器运行时，d3 指令都会重新加载。过滤器与 d3 指令无关，只是它们位于同一 Controller 下。(我不认为过滤器运行时 Controller 会重新加载。)

我相信问题出在我的 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为空，“[]”和“tags”未定义。我通过 <forcedirected-graph tags="tags" style="overflow: hidden;"></forcedirected-graph> 在 View 中传递了“标签”我真的无法理解为什么该函数无法获取参数。这就是为什么我愚蠢地使用 $scope.fdg.function()...包装这两个函数，以便它们可以到达从 View 传递的参数。

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

更多完整代码:here和 here .

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

提前致谢!

Answer 1

你在某处使用 ng-repeat 吗？
我记得意识到链接函数对于 ng-repeat 中的每个元素都会执行多次。因此，也许在这种情况下最好使用编译函数。检查这篇文章: http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/