AngualrJs:为此我需要在控制器中使用 $scope 吗? [英] AngualrJs: do I require $scope in my controller for this?

问题描述

我正在尝试模拟这个Plunker，特别是在每行添加一个按钮农业网格.

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 调用 ageCellRendererFunc 来渲染单元格.它正在生成一些 HTML 来生成一个按钮，当点击该按钮时将导致 ageClicked 被调用.

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.

那个 params.$scope.ageClicked = ageClicked; 似乎在分配一个 $scope 变量，它在按钮代码中使用:'<按钮 ng-click="ageClicked(data.age)">Age</button>'.

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>'.

我不确定为什么有必要分配 $scope 变量，以及为什么我们不能只引用 $scope 函数.可以吗?

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?

更重要的是，我没有将 $scope 注入到我的控制器中，因为我在视图中使用了 controller as 语法.

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

如何使用 controller as 语法将 HTML 按钮添加到 ag-grid 单元格，从而使类似的代码工作?

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

[更新] 上面引用的 Plunker 使用了一个非常旧版本的 ag-grid.

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

1. 我想使用最新版本，v22
2. 我不想使用$scope 或$rootscope，只是this 和controller as 语法
3. 每行应包含一个单元格，该单元格显示一个按钮，单击该按钮时，将执行以 soem 行数据为参数的函数(就像 Plunker 中的年龄"，但满足此列表中的 1 和 2)

推荐答案

它是 ag-grid (plunker)

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

在它调用ageCellRendererFunc

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

它初始化params (4012):

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

所以你可以使用 controller as

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

柱塞与 vm

编辑 1

这是一个使用 ag-grid 22.0.0 的 plunker

This is a plunker that uses 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;

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;

这篇关于AngualrJs:为此我需要在控制器中使用 $scope 吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！