【问题标题】:AngualrJs: do I require $scope in my controller for this?AngularJs:我需要在我的控制器中使用 $scope 吗?
【发布时间】:2020-08-01 07:47:36
【问题描述】:

我正在尝试模仿 this 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 变量,在按钮代码中使用:'&lt;button ng-click="ageClicked(data.age)"&gt;Age&lt;/button&gt;'

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

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

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


[更新] 上面提到的 Plunker 使用了非常旧的 ag-grid 版本。

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

【问题讨论】:

    标签: angularjs angularjs-scope ag-grid


    【解决方案1】:

    $scope 里面是ag-grid (plunker)

    在它调用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;
      /* ... */
     }
    

    plunger with vm


    编辑 1

    这是使用 ag-grid 22.0.0 的 plunker

    (已添加agGrid.initialiseAgGridWithAngular1(angular)

    这段代码不错:

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

    正如你提到的$scopeparams 相关,而不是你的控制器。您的控制器根本不使用$scope。这是 ag-grid 的定义。开发者可以使用另一个变量——bob,语法为params.bob.ageClicked = ageClicked;

    【讨论】:

    • 非常感谢您的帮助。不幸的是,我使用的是 ag-grid v22.0.0(而你的 Plinker 只使用 v2.3.4),当我在渲染函数内部断点时,params.$scopenull。有没有办法不参考$scope?例如,我可以function ageCellRendererFunc(params) { vm.ageClicked = ageClicked; return '&lt;button ng-click="vm.ageClicked(data.age)"&gt;Age&lt;/button&gt;'};? 并更新 HTML 以在包含网格的 div 上使用控制器 as`?
    • 一点也不。它与 UI 无关。你有社区 url js 路径吗?所以我可以把它放到demo中
    • @MawgsaysreinstateMonica 我看到你使用旧的 ag-grid 3.3.3,你提到了 22.0.0,不是吗?
    • 我在你的另一个问题中添加了 23 的柱塞,享受 :)
    • @MawgsaysreinstateMonica 欢迎您接受它并为其他用户投票。谢谢
    猜你喜欢
    • 1970-01-01
    • 2012-09-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-16
    • 2017-04-19
    • 2012-01-12
    • 1970-01-01
    相关资源
    最近更新 更多