AngularJs добавление кнопки в ячейку ag-grid в представлении состояния UI-маршрутизатора - PullRequest
Новая
       26

AngularJs добавление кнопки в ячейку ag-grid в представлении состояния UI-маршрутизатора

2 голосов
/ 25 апреля 2020

Я задал этот вопрос , о AngularJs и ag-grid, используя визуализацию ячеек, чтобы поместить кнопку в сетку ячеек, которая при нажатии делает что-то на основе данных .

Я получил отличный ответ от @MaximShoustin, но теперь вижу, что в этом есть нечто большее, чем я думал - мне нужна моя ag-grid, чтобы видеть состояние маршрутизатора UI .

Итак, я попытался объединить Plunker Максима с моим собственным Plunker, который показывает ag-grid в состоянии маршрутизатора UI-view , и у меня есть сделал этот Plunker , который не работает: - (

angular. js: 11598 TypeError: Невозможно установить нулевое свойство свойства priceClicked в priceCellRendererFun c (http://run.plnkr.co/preview/ck9ff1oft00083b63laoskhz3/controllers.js: 64: 36 )

, поскольку params.$scope равно null.

Если я вставлю строку params.$scope = [];, сетка отображается, но нажатие на кнопку ничего не делает.

Что я делаю неправильно? Кто-нибудь может помочь?

Я хочу

  • добавить кнопку в * 1 047 *Js ag-grid
  • , который находится в состоянии UI-маршрутизатора

Хмм, необходимо ли добавить angularCompileRows к параметрам сетки (в дополнение к проблеме api = null)?

1 Ответ

1 голос
/ 25 апреля 2020

Я не знаком с ag-grid, но предлагаю вам не бояться погружаться в ag-grid.js :).

В вашем примере вы не предоставляете никаких $scope до Grid

new agGrid.Grid(theGridDiv, $scope.grid);

После открытия https://cdnjs.cloudflare.com/ajax/libs/ag-grid/3.3.3/ag-grid.js мы видим, что вы можете предоставить конструктор $scope - Grid, поскольку в вашем случае params.$scope = null

Это полный конструктор: 

Grid(eGridDiv, gridOptions, globalEventListener, $scope, $compile, quickFilterOnScope)

Поэтому я изменил его на: 

new agGrid.Grid(theGridDiv, $scope.grid, null, $scope, $compile, null)

Далее вам нужно указать ag-grid, чтобы скомпилировать ng-click (потому что CellRenderer возвращает только строку): 

$scope.grid = {
    columnDefs: columnDefs,
    angularCompileRows:true,
   //...
}

Надеюсь, это поможет вам:)

Рабочий плункер

[ПРАВИТЬ 1]

ag-grid v23: Плункер 2

Рекомендуется использовать директиву ag0grid: 

<div ag-grid="grid" style="height: 100%;" class="ag-fresh"></div>

Он принимает вашу область автоматически (от ag-grid/23.0.2/ag-grid-community.js): 

function initialiseAgGridWithAngular1(angular) {
    var angularModule = angular.module("agGrid", []);
    angularModule.directive("agGrid", function () {
        return {
            restrict: "A",
            controller: ['$element', '$scope', '$compile', '$attrs', AngularDirectiveController],
            scope: true
        };
    });
}

[РЕДАКТИРОВАТЬ 2]

Плункер без директивы 

<div id="gridDiv" class="ag-fresh" style="height:100%; width:100%"></div>

Обязательно добавьте params: 

var gridParams = {
        $scope: $scope,
        $compile: $compile
    };

  const theGridDiv = document.querySelector('#gridDiv');
  new agGrid.Grid(theGridDiv, $scope.grid, gridParams);
...