Question

我想创建一个带链接的自定义列，并在ng-click上调用$ scope方法。 ngGrid（How to call a scope method from a button displayed in 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

在新版本的ui-grid中，这种方法对我不起作用。相反，我使用appScope核心API。 http://ui-grid.info/docs/#/tutorial/305_appScope

Answer 2

您应使用external-scopes属性声明要在单元格模板中使用的external scope：

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

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

2 个答案:

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