Question

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>'}
         ]
      };

用户重置的onclick我必须通过

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

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

单击

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

Answer 1

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

ngGrid创建了一个独立的范围，因此无法通过以下方式进入父范围：

$parent.editUser('')
<div ng-controller="AppCtrl as ctrl"><div ng-grid="options"></div></div>和ctrl.editUser('')
使用.（$scope.callback = {}; $scope.callback.editUser = function(){}; - ＆gt; callback.editUser('')）

ngGrid在options的隔离范围内使用您的cell/rowTemplates，因此您可以执行以下操作：

Javascript控制器：

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

<强> Plunker： Test app

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

1 个答案: