Angualr Js: мне требуется $ scope в моем контроллере для этого? - PullRequest
Новая
       30

Angualr Js: мне требуется $ scope в моем контроллере для этого?

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

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

function ageClicked(age) {
    window.alert("Age clicked: " + age);
}

function ageCellRendererFunc(params) {
    params.$scope.ageClicked = ageClicked;
    return '<button ng-click="ageClicked(data.age)">Age</button>';
}

Ag-grid вызывает ageCellRendererFunc для визуализации ячейки , Он генерирует некоторое количество HTML для добавления кнопки, которая при нажатии вызывает вызов ageClicked.

Кажется, что params.$scope.ageClicked = ageClicked; назначает переменную $scope, которая используется в код кнопки: '<button ng-click="ageClicked(data.age)">Age</button>'.

Я не уверен, зачем нужно присваивать переменную $scope, и почему мы не можем просто ссылаться на функцию $scope. Можно ли это сделать?

Более того, я не добавляю $scope в свой контроллер, поскольку я использую синтаксис constroller as в представлении.

Как получить аналогичный фрагмент кода работает, добавляя кнопку HTML в ячейку ag-grid, используя синтаксис controller as?

[Update], на который ссылался Plunker, используется очень старая версия grid.

  1. Я хочу использовать новейшую версию, v22
  2. Я не хочу использовать $scope или $rootscope, просто this и controller as синтаксис
  3. каждая строка должна содержать одну ячейку, в которой отображается кнопка, которая при нажатии выполняет функцию с данными строки соема в качестве параметра (точно так же, как «возраст» в Plunker, но выполняя 1 и 2 в этом списке)

1 Ответ

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

Это $scope внутри ag-grid (плункер)

Перед вызовом ageCellRendererFunc

function ageCellRendererFunc(params) {
    params.$scope.ageClicked = ageClicked;
    eturn '<button ng-click="ageClicked(data.age)">Age</button>';
 }

инициализируется params (4012): 

RenderedCell.prototype.createParams = function () {
            var params = {
                node: this.node,
                data: this.node.data,
                value: this.value,
                rowIndex: this.rowIndex,
                colDef: this.column.colDef,
                $scope: this.scope, // <----
                context: this.gridOptionsWrapper.getContext(),
                api: this.gridOptionsWrapper.getApi()
            };
            return params;
        };

Таким образом, вы можете использовать controller as

module.controller("exampleCtrl", function($http) {
  var vm = self;
  /* ... */
 }

плунжер с VM

РЕДАКТИРОВАТЬ 1

Это плункер , который использует ag-grid 22.0.0

(добавлено agGrid.initialiseAgGridWithAngular1(angular))

Этот код хорош: 

function ageCellRendererFunc(params) {
    params.$scope.ageClicked = ageClicked;
    return '<button ng-click="ageClicked(data.age)">Age</button>';
 }

Как вы упомянули, $scope относится к params, а не к вашему контроллеру. Ваш контроллер вообще не использует $scope. Это определение ag-grid. Разработчики могут использовать другую переменную - bob, и синтаксис будет params.bob.ageClicked = ageClicked;

...