Highcharts 및 AngularJS가있는 x 축 레이블의 체크 상자 입력

Question

내 애플리케이션에서는 일부 데이터를 표시하고 하나 이상의 카테고리를 선택할 수 있어야합니다. 카테고리는 x 축 레이블이고 하이 차트 예제 중 하나를 각 x 축 레이블에 대한 확인란 입력을 포함하도록 수정했습니다.

AngularJS를 사용하지 않을 경우 작동 예제는 https://codepen.io/kdbruin/pen/JNRgqa을 참조하십시오.

나는

formatter: function() { 
    return "<input type='checkbox' onchange='onChange(\"" + this.value + "\")'> " + this.value;; 
} 

에 레이블 포맷터 이벤트가 무시를 변경합니다.

컨트롤러의 기능을 사용하여 입력에서 onchange 이벤트를 처리하려면 어떻게해야합니까?

Answer 1

포맷터 콜백이 컨트롤러 범위 외부에서 호출되므로 onChange()에 액세스 할 수 없습니다. 가능한 해결 방법은 dom 요소에서 범위를 가져 오는 것일 수 있습니다.

formatter: function() { 
     var query = "[ng-controller=appCtrl]"; 
     return "<input type='checkbox' onchange='angular.element(document.querySelector(\"" + query + "\")).scope().onChange(\"" + this.value + "\")'>" + this.value; 
    } 

예 : 답변 https://codepen.io/anon/pen/bWBNOV?editors=1010