Question

我有一个包含一些D3代码的angularjs指令。该指令在应用程序中使用时非常有效。当我为测试目的编译这个指令时，我的问题出现了，在D3的svg中生成的代码的一部分生成了两次：节点和路径。

这是使用此特定指令（项目图）的html页面：

<div>
        <div ng-controller="GraphController as graphCtrl">
            <projects-graph
                    options="graphCtrl.options"
                    colours="graphCtrl.colours"
                    data="graphCtrl.data">
            </projects-graph>
        </div>
    </div>

这是生成指令的测试（我删除了一些不相关的代码）：

describe('The graph directive', function() {

   var scope, compile, q, window, ctrl;

   beforeEach(module('app'));

   beforeEach(inject(function($compile, $rootScope, $q, $window){
      q = $q;
      window = $window;
      compile = $compile;
      scope = $rootScope.$new();
   }));

it("display all nodes and paths given in the data", function() {

scope.data = {
  "nodes": [
    {"id":123, "name": "P1", "type": "Project"},
    {"id":5, "name": "P2", "type": "Project"}
  ],
  "paths": [
    {"source":123, "target":5}
  ]
};

var graph = compile(angular.element('<projects-graph  options="options" colours="colours" data="data"></projects-graph>'))(scope);
scope.$digest();

console.log(graph);
expect($(graph).find("circle").length).toBe(2);
});

});

应该在指令中生成的期望代码是：

<projects-graph options="options" colours="colours" data="data" class="ng-scope ng-isolate-scope">
<svg id="graphSvg" width="1500" height="800">
    ...
    <path class="link dragline hidden" d="M0,0L0,0"></path>
    <g><path class="link" style="marker-end: url(#end-arrow);"></path></g>
    <g>
        <g><circle class="node" r="40" style="fill: rgb(200, 200, 200); stroke: rgb(140, 140, 140);"></circle><text x="0" y="0" text-anchor="middle" alignment-baseline="middle" class="id">P1</text></g>
        <g><circle class="node" r="40" style="fill: rgb(200, 200, 200); stroke: rgb(140, 140, 140);"></circle><text x="0" y="0" text-anchor="middle" alignment-baseline="middle" class="id">P2</text></g>
    </g>
</svg>
</projects-graph>

但我得到的是：

<projects-graph options="options" colours="colours" data="data" class="ng-scope ng-isolate-scope">
<svg id="graphSvg" width="1500" height="800">
    ...
    <path class="link dragline hidden" d="M0,0L0,0"></path>
    <g><path class="link" style="marker-end: url(#end-arrow);"></path></g>
    <g>
        <g><circle class="node" r="40" style="fill: rgb(200, 200, 200); stroke: rgb(140, 140, 140);"></circle><text x="0" y="0" text-anchor="middle" alignment-baseline="middle" class="id">P1</text></g>
        <g><circle class="node" r="40" style="fill: rgb(200, 200, 200); stroke: rgb(140, 140, 140);"></circle><text x="0" y="0" text-anchor="middle" alignment-baseline="middle" class="id">P2</text></g>
    </g>
    <g><path class="link" style="marker-end: url(#end-arrow);"></path></g>
    <g>
        <g><circle class="node" r="40" style="fill: rgb(200, 200, 200); stroke: rgb(140, 140, 140);"></circle><text x="0" y="0" text-anchor="middle" alignment-baseline="middle" class="id">P1</text></g>
        <g><circle class="node" r="40" style="fill: rgb(200, 200, 200); stroke: rgb(140, 140, 140);"></circle><text x="0" y="0" text-anchor="middle" alignment-baseline="middle" class="id">P2</text></g>
    </g>
</svg>
</projects-graph>

如您所见，路径和圆圈组生成两次。有什么想法吗？

Answer 1

更改

var graph = compile(angular.element('<projects-graph  options="options" colours="colours" data="data"></projects-graph>'))(scope);

到

var graph = angular.element(
  '<projects-graph options="options" colours="colours" data="data"></projects-graph>'
);
compile(graph)(scope);

Angularjs测试D3指令编译bug

1 个答案: