如何將angularjs指令綁定到鏈接函數中定義的d3js節點

Question

我想在AngularJs應用程序中使用d3js圖形，然後將指令綁定到節點。

首先我把js代碼放在指令的鏈接函數中，一切正常。

angular.module('myApp', []). 

directive('grapheForces', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element) { 
      var width = 450; 
      var height = 400; 
      var color = d3.scale.category20(); 

      scope.$watch('grapheDatas', function (grapheDatas) { 
       var force = d3.layout.force() 
       .charge(-120) 
       .linkDistance(30) 
       .size([width, height]) 
       .nodes(grapheDatas.nodes) 
       .links(grapheDatas.links) 
       .start(); 

       var svg = d3.select("body").append("svg") 
       .attr("width", width) 
       .attr("height", height); 

       var link = svg.selectAll(".link") 
       .data(grapheDatas.links) 
       .enter().append("line") 
       .attr("class", "link") 
       .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

       var node = svg.selectAll(".node") 
       .data(grapheDatas.nodes) 
       .enter().append("circle") 
       .attr("class", "node") 
       .attr("r", 5) 
       .style("fill", function(d) { return color(d.group); }) 
       .call(force.drag); 

       node.append("title") 
       .text(function(d) { return d.name; }); 

       force.on("tick", function() { 
        link.attr("x1", function(d) { return d.source.x; }) 
        .attr("y1", function(d) { return d.source.y; }) 
        .attr("x2", function(d) { return d.target.x; }) 
        .attr("y2", function(d) { return d.target.y; }); 

        node.attr("cx", function(d) { return d.x; }) 
        .attr("cy", function(d) { return d.y; }); 
       }); 
      }); 
     } 
    } 
}). 

然後我想的工具提示添加到節點，所以我去：

   var node = svg.selectAll(".node") 
       .attr("tooltip", function(){ 
        return "tooltipTextHere"; 
       }); 

，因爲我用的角度，引導，提示是一個指令。 工具提示屬性是HTML結果以及存在：

<circle tooltip="tooltipTextHere" class="nodeCircle" r="4.5" style="fill: #b0c4de;"></circle> 

但提示是無效的，因此它也適用於每一個我結合這樣的指令。

我想這是因爲該指令在編譯階段沒有考慮到，但我無法找到如何做到這一點，因爲我達到了AngularJs當前的理解極限。

你有一個想法，我怎麼能使它發生？ 非常感謝您提供寶貴的答案。

Answer 1

我已經回答了非常類似的question here。你可以在那裏看到完整的答案。

基本上，你添加提示屬性之後，你需要的東西刪除自定義指令屬性，像element.removeAttr("graphe-forces")，然後運行$compile(element)(scope)這樣的應用程序會發現提示指令。

這是fiddle of a working example。