Блог

Я пытаюсь добавить директиву контекстного меню к динамически созданному элементу SVG.

В контроллере AngularJS я определяю свой svg следующим образом:

 var svg = d3.select("#svg-canvas").append("svg")
    .attr("width", 100)
    .attr("height", 100)
    .style("pointer-events", "all")
    .append('g');
  

Позже я добавил к нему прямоугольник, как показано ниже. Обратите внимание, что я добавляю атрибут «ng-context-menu», моей директивы AngularJS.

 svg.append("rect")
.attr("x", 35)
.attr("y", 15)
.attr("width", 20)
.attr("height", 20)
.attr("ng-context-menu", "")
.style("fill", "gray");
  

Я добавляю этот код после загрузки DOM, таким образом, этот код не компилируется с помощью AngularJS. Это означает, что контекстное меню не привязано к элементу.

Я добавляю полный рабочий код в JSFiddle, на случай, если вы захотите проверить 🙂

У вас есть какие-либо предложения, чтобы заставить это работать? Нужно ли мне создавать директиву для этого?

Вы можете внедрить службу $compile и использовать ее для компиляции #svg-canvas.

 $compile(angular.element('#svg-canvas'))($scope);
  

Проверьте обновленный JSFiddle

Если вы хотите скомпилировать любой элемент d3, используйте

 $compile(element[0][0])(scope)
  

Вы можете найти ее здесь JSFiddle (но имейте в виду, что в этом фрагменте фактически скомпилирован элемент ‘g’, а не весь svg)