javascript - Angular Directive inside d3 node -

i've got simple version of tree layout (https://bl.ocks.org/mbostock/4339083) on angular app. however, i'm trying replace "text" node angular directive. how can achieve this?

instead of .text(function(d) { return d.name; }), i'm trying compile directive takes in d.name parameter.

versions:

• angular: 1.5.3
• d3: 3.5.17

update: compile works great, injects html it, doesn't show in svg. when hover on user-node node in dom, doesn't highlight on page...

your questions little vague perhaps use $compile?

var nodeenter = node.enter().append("g")   .attr("class", "node")   .attr("transform", function(d) {     return "translate(" + d.y + "," + d.x + ")";   });  nodeenter.each(function(d){   var el = $compile( '<node-directive></node-directive>' )( scope );   angular.element(this).append(el); }); 

---

edits

i worked example. seems svg doesn't nesting of custom elements (your directives inside of it). so, here's approach:

nodeenter.append("node-directive")   .attr("data-name", function(d){     return d.name;   })   .each(function(){     $compile(this)(scope);   }); 

where node-directive is:

angular.module('d3chart').directive('nodedirective', [   function() {     return {       link: function(scope, element, attr) {         var p = d3.select(element[0].parentnode);         p.append("text")           .text(attr.name);         element.remove();       }     };   } ]); 

complete code:

var myappmodule = angular.module('d3chart', []);    angular.module('d3chart').controller('chartctrl', function($scope) {      $scope.treedata = [{      "name": "toplevel",      "parent": "null",      "value": 10,      "type": "black",      "level": "red",      "children": [{        "name": "level 2a",        "parent": "top level",        "value": 15,        "type": "grey",        "level": "red",        "children": [{          "name": "son of a",          "parent": "level 2 a",          "value": 5,          "type": "steelblue",          "level": "orange"        }, {          "name": "daughter of a",          "parent": "level 2 a",          "value": 8,          "type": "steelblue",          "level": "red"        }]      }, {        "name": "level 2b",        "parent": "top level",        "value": 10,        "type": "grey",        "level": "green"      }]    }];  });    angular.module('d3chart').directive('nodedirective', [    function() {      return {        link: function(scope, element, attr) {          var p = d3.select(element[0].parentnode);          p.append("text")            .text(attr.name);          element.remove();        }      };    }  ]);    angular.module('d3chart').directive('treelayout', ['$compile',     function($compile) {      return {        restrict: 'e',        scope: {          data: '='        },        link: function(scope, element) {            var margin = {              top: 20,              right: 120,              bottom: 20,              left: 120            },            width = 960 - margin.right - margin.left,            height = 500 - margin.top - margin.bottom;            var = 0;            var tree = d3.layout.tree()            .size([height, width]);            var diagonal = d3.svg.diagonal()            .projection(function(d) {              return [d.y, d.x];            });            var svg = d3.select(element[0]).append("svg")            .attr("width", width + margin.right + margin.left)            .attr("height", height + margin.top + margin.bottom)            .append("g")            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");            root = scope.data[0];            update(root);            function update(source) {              // compute new tree layout.            var nodes = tree.nodes(root).reverse(),              links = tree.links(nodes);              // normalize fixed-depth.            nodes.foreach(function(d) {              d.y = d.depth * 180;            });              // declare nodes…            var node = svg.selectall("g.node")              .data(nodes, function(d) {                return d.id || (d.id = ++i);              });              // enter nodes.            var nodeenter = node.enter().append("g")              .attr("class", "node")              .attr("transform", function(d) {                return "translate(" + d.y + "," + d.x + ")";              });              nodeenter.append("circle")              .attr("r", function(d) {                return d.value;              })              .style("stroke", function(d) {                return d.type;              })              .style("fill", function(d) {                return d.level;              });              nodeenter.append("node-directive")              .attr("data-name", function(d){                return d.name;              })              .each(function(){                $compile(this)(scope);              });              // declare links…            var link = svg.selectall("path.link")              .data(links, function(d) {                return d.target.id;              });              // enter links.            link.enter().insert("path", "g")              .attr("class", "link")              .style("stroke", function(d) {                return d.target.level;              })              .attr("d", diagonal);          }        }      }    }  ])

<!doctype html>  <html ng-app="d3chart">      <head>      <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>      <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>      <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>      <script src="script.js"></script>    </head>      <body>      <div ng-controller="chartctrl">        <tree-layout data="treedata"></tree-layout>      </div>    </body>    </html>