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>

我想知道页面上的某些东西是否会窃取点击事件？似乎 Angular 在根 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 和 Angular 版本的 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/