AngualrJs:我是否需要在控制器中使用$ scope?

问题描述

我正在尝试模拟此柱塞，特别是在农业网格.

 功能ageClicked(age){window.alert(点击年龄:" +年龄);}函数ageCellRendererFunc(params){params.$ scope.ageClicked = ageClicked;返回'< button ng-click ="ageClicked(data.age)">年龄</button>';} 

Ag-grid调用 ageCellRendererFunc 渲染单元格.它会生成一些HTML来呈现按钮，单击该按钮将导致调用 ageClicked .

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

我不确定是否有必要分配一个 $ scope 变量，以及为什么我们不能仅引用一个 $ scope 函数.能做到吗?

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

如何使用 controller as sytax将类似的代码片段添加到 ag-grid 单元格中?

---

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

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

解决方案

它是 ag-grid (插件)

中的 $ scope

在调用 ageCellRendererFunc

之前

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

它初始化 params (4012):

  RenderedCell.prototype.createParams = function(){var params = {节点:this.node，数据:this.node.data，值:this.value，rowIndex:this.rowIndex，colDef:this.column.colDef，$ scope:this.scope，//< ----上下文:this.gridOptionsWrapper.getContext()，api:this.gridOptionsWrapper.getApi()};返回参数；}; 

因此您可以将 controller用作

  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;返回'< button ng-click ="ageClicked(data.age)">年龄</button>';} 

如前所述， $ scope 与 params 相关，而不与您的控制器相关.您的控制器根本不使用 $ scope .这是ag-grid的定义.开发人员可以使用另一个变量- bob ，语法将为 params.bob.ageClicked = ageClicked;

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.

1. I want to use the newest version, v22
2. I do not want to use $scope or $rootscope, just this and controller as syntax
3. 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)

解决方案

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;

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