如何从 ngGrid 中显示的按钮调用范围方法

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

本文关键字：按钮 调用 范围 方法 显示 ngGrid      更新时间：2023-09-26
angular.module('harbinger').controller(
   'Admin.UserlistController',  
   function($rootScope, $scope, $location, $http, userService)
   {
      // etc
      $scope.gridOptions = {
         // etc ,
         enableRowSelection: false,
         columnDefs: [
            {field: 'userName', displayName: 'Username'},
            {field: 'name', displayName: 'Name'},
            {field: 'organization', displayName: 'Organization'},
            {field: 'title', displayName: 'Title'},
            {field: 'dateOfBirth', displayName: 'Date Of Birth'},   
            {field: 'controls', displayName: '', cellTemplate: '<div id="controls" ><a id="user-edit" onClick="editUser(''{{row.entity.userName}}'')">Edit</a> | <a id="user-reset" data-ng-click="resetUser(''{{row.entity.userName}}'')">Reset</a> | <a id="user-unlock">Un-lock</a></div>'}
         ]
      };

单击用户重置时，我必须通过 

userService.reset($scope.userData, function( data ) // success
                {
                   // etc
                }

我正在使用ngGrid，并且我正在尝试从ngGrid中显示的按钮调用范围方法。

单击时，我无法执行此功能。请给我角度js的方式来做到这一点.

也许这是一个老问题，但我会回答它。

ngGrid创建一个隔离的作用域，因此无法通过如下所示的内容访问父作用域：

  1. $parent.editUser('')
  2. <div ng-controller="AppCtrl as ctrl"><div ng-grid="options"></div></div>和ctrl.editUser('')
  3. 通过使用. ( $scope.callback = {}; $scope.callback.editUser = function(){}; -> callback.editUser('') (

ngGrid在独立作用域中使用options，该作用域可供cell/rowTemplates使用，因此您可以执行以下操作：

Javascript Controller： 

$scope.editUser = function(userName) {
    ...
};
$scope.options = {
    data: 'data',
    columnDefs: [{
        field:'name', 
        displayName:'name', 
        cellTemplate: '<div ng-click="options.editUser(''{{row.entity.userName}}'')">Edit</div>'
    }],
    editUser: $scope.editUser
}

.HTML：

<div ng-grid="options"></div>

普伦克：测试应用

相关文章：