D3에서 ng-click가 작동하지 않습니다. Svg가 생성되었습니다

Question

D3을 각도로 사용하고 있으며 내 텍스트에 일부 텍스트 요소를 삽입하고 컨트롤러에있는 일부 기능을 실행하기 위해 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하기 전에 :

<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> 

그것이 그렇게처럼 내 요소에 속성 role="button" 및 tabindex="0"를 추가하기 때문에 $compile하고있다 뭔가를 표시하지 페이지의 내용이 클릭을 훔칠 수 있는지 궁금하네요. 사건? 그것은 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의 버전과 가진 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/