1

我为 d3 强制有向图编写了一个角度指令。 代码在这里。 我使用 $log.log("xx"); 调试代码。由于某种原因，我意识到该指令多次加载。对于与指令绑定的 mg 控制器，我有 2 个工厂，每当控制器初始化时都会调用这两个工厂。通过使用$log.log("xx");我意识到当pay 加载时，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 指令的模板与那些工作指令相匹配，但我失败了:(（我对参数/范围在指令链接中的实际工作方式感到困惑）。

更多完整代码：这里和这里。

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

提前致谢！

4

1 回答 1

0

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

于 2015-06-28T15:24:53.727 回答