Question

UI-grid在ngDialog中用于通过按钮单击显示总计。结果看到一个错误：

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

下面代码的特殊性（和上下文）是两个：一些html节点被动态注入到web页面中，编译为angular指令正常工作，这是一个Chrome扩展。

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
});

Angular ui-grid不适用于ngDialog

1 个答案: