javascript - ng-click 在 D3 生成的 svg 中不起作用

Question

我将 D3 与 Angular 一起使用，我想将一些文本元素插入到我的 svg 中，并在它们上单击 ng-click 以触发我的 Controller 中的一些功能。然而，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/