ng-click不能在D3中生成svg

Question

我正在使用D3和Angular，我想插入一些文本元素到我的svg中，並在它們上有一個ng-click來觸發我的控制器中的一些功能。然而，ng-click似乎從未發生過火災。我已經使用$compile試圖在下面的帖子提示：

• How do I use angularjs directives in generated d3 html?
• Angular ng-click's inside a dynamically created d3 chart are not working

這些解決方案既爲我工作。它出現在$compile正在做的事情，因爲它附加的屬性role="button"和tabindex="0"我的元素，像這樣：

以前$compile：

<svg> 
    <text y="30" cursor="pointer" ng-click="alert('clicked')">CLICK ME</text> 
</svg> 

後$compile：

<svg> 
    <text y="30" cursor="pointer" ng-click="alert('clicked')" role="button" tabindex="0">CLICK ME</text> 
</svg> 

我想知道，如果頁面上的東西可能會竊取點擊事件？似乎角度已經添加了一個點擊處理程序的根html元素。我從來沒有注意到這個

之前，這是指令代碼，我有

.directive('clickMe', function ($compile) { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attributes) { 
     var svg = d3.select(element[0]) 
     .append('svg'); 
     svg.append('text') 
      .text('CLICK ME') 
      .attr('y', '30') 
      .attr('cursor', 'pointer') 
      .attr('ng-click', 'alert(\'clicked\')'); 

     var compiledSvg = $compile(svg.node())(scope); 
     element[0].children[0].replaceWith(compiledSvg[0]); 
}) 

與D3的版本和A的jsfiddle角我使用的說明了這個問題：https://jsfiddle.net/soultrip/604pts5v/3/

Answer 1

我認爲alert不在您的模板範圍內。相反，請在指令範圍內創建一個方法，並在ngClick上調用該方法。

var myApp = angular.module('myApp', []); 

myApp.directive('myDirective', function($compile) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attributes) { 
     let svg = d3.select(element[0]) 
     .append('svg'); 
     svg.append('text') 
     .text('CLICK ME') 
     .attr('y', '30') 
     .attr('cursor', 'pointer') 
     .attr('ng-click', 'showAlert(\'clicked\')'); 
     let compiledSvg = $compile(svg.node())(scope); 
     element[0].children[0].replaceWith(compiledSvg[0]); 

     scope.showAlert = function(message) { 
     alert(message); 
     }; 
    } 
    } 
}); 

https://jsfiddle.net/604pts5v/5/