Угловая ui-сетка не работает с ngDialog

Question

UI-сетка используется в ngDialog для отображения итогов нажатием кнопки. В результате появляется сообщение об ошибке:

**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 доказано: если я ввожу

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

в другой блок (не ngDialog) - показана таблица.

Answer 1

Большое спасибо моим коллегам. Проблема была решена путем замены блока ngDialog.open на:

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