ngDialog에서 각도 ui 격자가 작동하지 않습니다.

Question

ngDialog에서 단추 그리기로 총계를 표시하는 데 UI 격자가 사용됩니다. 결과적으로 오류 참조 : 아래 코드의

**angular.js:13236 TypeError: Cannot read property 'data' of undefined** 

특수성 (문맥은) 두 가지이다 : 일부 HTML 노드가 각 지침 정상 작동에 컴파일과 동적 웹 페이지에 주입이는 크롬 확장된다.

function totalsButtons($scope, $http, $document, $element, $compile, ngDialog, uiGridConstants) { 
    //First insert button right of "Close" hyperlink 
    var elements_arr = document.getElementsByTagName("span"); 
    var close_el = null; 
    //Looking for target link "Close" 
    for (var element in elements_arr) { 
    if(elements_arr[element].innerHTML == "Закрыть") { 
     close_el = elements_arr[element]; 
     break; 
    } 
    } 

    //Define parent node where insert new button to 
    $scope.totals_butns_line = close_el.parentNode.parentNode; 

    //Define table (uses ui-grid) 
    $scope.totalsByMonthG = {}; 
    $scope.totalsByMonthG.columnDefs = [ 
     { name: 'year', displayName:'Year'}, 
     { name: 'month', displayName:'Month'}, 
     { name: 'totals_agency', displayName:'Totals Agency (VAT)'}, 
     { name: 'totals_client', displayName:'Totals Client (VAT)'}, 
    ]; 
    $scope.totalsByMonthG.data = [{"year":"2016", "month":"10", "totals_agency":"10", "totals_client":"20"}]; 
    $scope.totalsByMonthG.onRegisterApi = function(gridApi){ 
     //set gridApi on scope 
     $scope.gridApi = gridApi; 
    }; 

    //Define and insert a button "Tools by months" into html dynamically 
    var elem = document.createElement('a'); 
    elem.setAttribute("href", "#"); 
    elem.setAttribute("class", "dyn"); 
    elem.setAttribute("ng-click", "openTotalsByMonth()"); 
    var html_code = '<span>Totals by months</span>' + "\n"; 
    elem.innerHTML = html_code; 
    $scope.totals_butns_line.appendChild(elem); 
    $compile(elem)($scope); 


    //Define and insert template of dialog "Totals by months" (uses ngDialog) 
    var dialog = document.createElement('script'); 
    dialog.setAttribute("id", "openTotalsByMonth"); 
    dialog.setAttribute("type", "text/ng-template"); 
    html_code = ""; 
    html_code += '<div class="ngdialog-message">'; 
    html_code += '<h2>Totals by months</h2>'; 
    html_code += '<div ui-grid="totalsByMonthG" class="grid"></div>'; 
    html_code += '</div>'; 
    html_code += '<div class="ngdialog-buttons mt">'; 
    html_code += '<input type="button" value="OK" ng-click="closeThisDialog()"/>'; 
    html_code += '</div>'; 
    dialog.innerHTML = html_code; 
    $scope.totals_butns_line.appendChild(dialog); 
    $compile(dialog)($scope); 


    $scope.openTotalsByMonth = function() { 
    //The function activates by ngClick in button "Totals by months" 

    //Open a dialog 
    ngDialog.open({ 
     template: 'openTotalsByMonth' 
    }); 
    }; 
    //Error here 

} 

ngDialog 영향에 대한 나의 가설

이 입증 : 나는 다른 블록 (하지 ngDialog)에

<div ui-grid="totalsByMonthG" class="grid"></div> 

를 삽입하면 - 테이블이 표시됩니다.

Answer 1

많은 동료 덕분에. ngDialog.open 블록을 다음으로 대체하여 문제가 해결되었습니다.

//Open a dialog 
ngDialog.open({ 
    template: 'openTotalsByMonth', 
    scope: $scope 
});