d3 SVG中的Angular指令

Question

Is it possible to include an Angular directive within a d3 SVG ?

node.append("foreignObject")
  .attr("width", 100)
  .attr("height", 100)
  .append("xhtml:my-directive")

<my-directive></my-directive> is created in the SVG , but the controller never runs and the directive's HTML content is missing. In a sibling of the SVG , the directive renders correctly.

Answer 1

As of AngularJS 1.3.0-rc.5 , you can specify your directive as an SVG by specifying templateNamespace: 'svg' alongside replace: true . Prior to this version, there was no real first-class support for SVG and you'll find yourself hacking around if unable to move up from 1.2.x . You'll also need to inject and leverage the $compile service to append a dynamic directive. Observe the following simplified example...

<svg id="mysvg">
    <rect height="100" width="100" fill="dodgerblue"></rect>
</svg>

---

.controller('ctrl', function($scope, $compile) {

    var node = angular.element(document.getElementById('mysvg'));
    node.append($compile('<my-directive></my-directive>')($scope))
})
.directive('myDirective', function() {
    return {
        templateNamespace: 'svg',
        template: '<rect height="10" width="100" fill="tomato"></rect>',
        replace: true,
        link: function(scope, elem, attrs) {
            console.log('linked');
        }
    }
});

JSFiddle Link - working demo v.1.3.0

You can also check out some project discussion here for the milestones of SVG support within the AngularJS project.