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

How to call a scope method from a button displayed in ui-grid - in Angular js

本文关键字：范围 方法 js Angular 调用 按钮 ui-grid 显示      更新时间：2023-09-26

我想创建一个带有链接的自定义列，并在ng单击时调用$scope方法。ngGrid（如何从ngGrid -in Angular js中显示的按钮调用scope方法）也有非常相似的问题，并且该解决方案有效。我正在使用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

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

您应该使用 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

相关文章：