AngualrJs: do I require $scope in my controller for this?

问题

I am trying to emulate this Plunker, specifically adding a button to each row of an 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 calls ageCellRendererFunc to render the cell. It is generating some HTML to ender a button, which, when clicked will cause ageClicked to be called.

That params.$scope.ageClicked = ageClicked; seems to be assigning a $scope variable, which is used in the button code: '<button ng-click="ageClicked(data.age)">Age</button>'.

I am not sure whay it is necessary to assigne a $scope variable, and why we can't just reference a $scope function. Can that be done?

More to the point, I do not inject $scope into my controller, bause I use the constroller as syntax in the view.

How can I get a similar piece of code working, adding an HTML button to an ag-grid cell, using the controller as sytax?

[Update] the Plunker referenced above uses a very old version of ag-grid.

I want to use the newest version, v22
I do not want to use $scope or $rootscope, just this and controller as syntax
each row should contain one cell which displays a button which, when clicked, executes a function with soem row data as paraemeter (just like the "age" in the Plunker, but fulfilling 1 & 2 in this list)

回答1:

It is a $scope inside ag-grid (plunker)

Before it calls ageCellRendererFunc

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

it initializes 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;
        };

So you can use controller as

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

plunger with vm

EDIT 1

This is a plunker that uses ag-grid 22.0.0

(Added agGrid.initialiseAgGridWithAngular1(angular))

This code is good:

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

As you mentioned $scope is related to params and not your controller. Your controller does not use $scope at all. This is a definition of ag-grid. The developers can use another variable - bob and the syntax will be params.bob.ageClicked = ageClicked;

来源：https://stackoverflow.com/questions/61294833/angualrjs-do-i-require-scope-in-my-controller-for-this

标签

angularjs

angularjs-scope

ag-grid