Angularjs Angular UI Grid 3.x版本中的操作按钮

我正在尝试使用渲染一个简单的表。 对于每一行，单击时需要一个按钮，该按钮应在父控制器中处理

Javascript:-

angular.module("app", ['ui.grid', 'ui.grid.edit', 'ui.grid.selection', 'ui.grid.pagination', 'ui.grid.expandable', 'ui.grid.paging']).controller("appController", function($scope) {
  console.log("Controller is up.");
  $scope.data = [];
  for (var i = 0; i < 50; i++) {
    $scope.data.push({
      fullName: "Name" + i,
      age: i
    });
  }

  $scope.clickHandler = function(){
    // this never gets invoked ?!
    console.log("Row Action click Handler.");
  };


  $scope.gridOptions = {
    data: $scope.data,
    columnDefs:[ {name:'fullName',field:'fullName'},
              {name:'age',field:'age'},
              {name:' ',cellTemplate:'<div><button ng-click="clickHandler()">Click Here</button></div>'}
            ]
  };
});

angular.module（“app”、[“ui.grid”、“ui.grid.edit”、“ui.grid.selection”、“ui.grid.pagination”、“ui.grid.expandable”、“ui.grid.paging”]））.controller（“appController”，函数（$scope）{
日志（“控制器已启动”）；
$scope.data=[]；
对于（变量i=0；i<50；i++）{
$scope.data.push({
全名：“姓名”+i，
年龄：i
});
}
$scope.clickHandler=函数（）{
//这永远不会被调用？！
log（“行操作单击处理程序”）；
};
$scope.gridOptions={
数据：$scope.data，
columnDefs:[{name:'fullName'，字段：'fullName'}，
{名称：'age'，字段：'age'}，
{名称：''，单元格模板：'单击此处'}
]
};
});

HTML

角度UI网格不稳定
试验

与代码中一样，为了呈现操作按钮，我使用了columnDefs和第三列的内联模板

问题

---

单击按钮不起作用。我希望在单击时执行“$scope.clickHandler”函数。另外，我应该能够将'name'作为参数传递给click处理程序。

在新的

ui网格中

一切都发生在

隔离的
范围内。因此，他们增加了处理
外部
范围的功能

下面是要做的：

在html中，按如下方式定义网格：

<div class="grid" external-scopes="clickHandler" ui-grid="gridOptions">

{
    name:'Action',
    cellTemplate: '<div><button ng-click="getExternalScopes().onClick(row.entity.fullName)">Click Here</button></div>'
}

最后，按如下方式定义您的cellTemplate：

<div class="grid" external-scopes="clickHandler" ui-grid="gridOptions">

{
    name:'Action',
    cellTemplate: '<div><button ng-click="getExternalScopes().onClick(row.entity.fullName)">Click Here</button></div>'
}

{
名称：'Action'，
cellTemplate:'单击此处'
}

这是你的叉子
在我看来比@main更容易：

在$scope成员之前添加
grid.appScope.
。

例如，在您的情况下调用
$scope.clickHandler
：

cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'

cellTemplate:“单击此处”
请注意，如果您使用路由配置而不是直接分配应用程序控制器，则getExternalScopes（）方法会按预期工作，只需一个注释

在相应的控制器中，分配以下语句
$scope.gridScope=$scope
 与@gdoron的答案相似，但用于
controllerAs
语法。在控制器中，应将
appScopeProvider
选项设置为指向
此
对象：

this.gridOptions = {
  ...,
  appScopeProvider: this
};

然后，
cellTemplate:“单击此处”

FYI：默认情况下，ui网格元素的父范围将分配给网格。appScope此属性允许您分配任何要网格化的引用。appScope
这里有一个类似用法的插件，它似乎在clickhandler内触发ng click:@trainoasis；您的plunker似乎工作正常。但是，1）您正在使用ng grid（UI grid的旧版本）2）我的plunker出了什么问题？这个plunker不是我的，只是在搜索您的解决方案时找到的。目前我看不出你的电脑有什么问题，我建议你和正在工作的电脑并肩工作，也许能找到你的问题。它正在工作。我在哪里可以了解到这种新的“隔离”作用域方法？仅供参考，您可以将grid.appScope与appScopeProvider一起使用，而不是使用外部作用域。您还可以执行
grid.appScope.{controllerAs variable here}.clickHandler（）
因此，如果您的controllerAs变量是“m”，您可以执行
grid.appScope.m.clickHandler（）
。