如何从ui-grid中显示的按钮调用范围方法 - 在Angular js中

Question

我想创建一个带链接的自定义列,并在ng-click上调用$ scope方法.对于ngGrid(如何从ngGrid中显示的按钮调用范围方法-in Angular js)有非常类似的问题,该解决方案有效.我正在使用ui-grid,它应该只是更新版本的ngGrid,但它似乎不适用于那里.

这是我的代码:

var app = angular.module('plunker', ['ui.grid']);

app.controller('MainCtrl', function($scope) {  
  $scope.gridOptions = {
    data: [{name: 'test'}],
      columnDefs: [{
        field:'name', 
        displayName:'name', 
        cellTemplate: '<div ng-click="gridOptions.editUser()">Edit</div>'
      }],
      editUser: $scope.editUser
    };

  $scope.editUser = function() {
    alert('It works!');
  };
});

http://plnkr.co/edit/Q5SuIeAPFpZaUKbmIDCn

以下是适用于ngGrid的原始解决方案:http://plnkr.co/edit/hgTQ1XdEVRyxscoNs76q

Answer 1

您应该使用属性声明将在单元格模板中使用的外部范围external-scopes：

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

然后在控制器中您需要定义这个范围对象：

$scope.gridScope = {
    editUser: function() {
        alert('It works!');
    }
}

最后，您可以在模板中访问此外部范围

cellTemplate: '<div ng-click="getExternalScopes().editUser()">Edit</div>'

演示：http://plnkr.co/edit/saYe6sddbcO76o9qBrNu? p=preview