각도 - Kendo treeview 확인란 변경 이벤트가 여러 번 실행 됨

Question

각도를 사용하여 확인란 변경 이벤트를 구현하려고하지만 확인란을 클릭했을 때 여러 번 이벤트가 실행되는 것을 보려고합니다.

나는 plnkr을 만들었습니다. 도와주세요. 이상적으로 그것은 한 번만 해고되어야합니다.

$scope.treeOptions = { 
    checkboxes: { 
    checkChildren: true 
    }, 
    dataBound: function(e) { 
    $scope.attachChangeEvent(e); 

    } 

}; 

이벤트 변경 코드 :

$scope.attachChangeEvent = function(e) { 

    var dataSource = e.sender.dataSource; 
    // issue : change event is getting called multiple times for every click on checkbox 
    dataSource.bind("change", function(e) { 
    var selectedNodes = 0; 

    var checkedNodes = []; 

    $scope.checkedNodeIds(dataSource.view(), checkedNodes); 


    for (var i = 0; i < checkedNodes.length; i++) { 
     var nd = checkedNodes[i]; 
     if (nd.checked) { 
     selectedNodes++; 
     } 
    } 
    // check the console - this is called multiple times for one checkbox click 
    console.log(selectedNodes); 
    }); 
}; 

모든 체크 박스가 업데이트 된 후 하나 개의 이벤트가 발생하도록하기 위해 부착하는 또 다른 이벤트가 있나요? 아니면 모든 '변경'이벤트를 그룹화하고 대신 하나만 실행하는 방법이 있을까요?

Answer 1

dataBound 이벤트는 계층 적 데이터 소스 (각 자식 DS가 이벤트를 트리거하고 거품을 일으키기 때문에)가 여러 번 트리거됩니다. 결과적으로 변경 핸들러를 여러 번 바인딩합니다. 대신 initTree 메서드에서 변경 이벤트를 바인딩해야합니다. 미리보기 :

var knobj = new kendo.data.HierarchicalDataSource({ 
    data: arrayObj 
}); 

//setting heirarchial data to scope 
$scope.treeObj = knobj; 
$scope.attachChangeEvent(); 

(updated demo) 또는

, 당신은 dataBound 이벤트를 사용할 수 있습니다 분명히 바인딩이 실행됩니다 마지막으로 (demo)에 대한 undefined 인 e.node을 확인하십시오

dataBound: function(e) { 
    if (!e.node) { 
     $scope.attachChangeEvent(); 
    } 
}