javascript - ng-grid 嵌入式菜单被隐藏

Question

我们目前正在使用 ng-grid 在网格中显示我们的数据。但是，我们现在要做的是为每一行创建一个菜单。

如果在普通表格中，这是一项简单的任务。但是，使用 ng-grid 时，我们遇到了问题，因为实际的菜单没有显示。

换句话说，它将菜单放置在单元格中，因此当它显示时，由于溢出隐藏在单元格上，我们只能看到菜单的一部分(希望有意义)

我们正在努力实现这样的目标:http://jsfiddle.net/akA6H/39/

var myApp = angular.module('myApp', ['ui.bootstrap']);

function MyCtrl($scope) {
     $scope.name = 'Superhero';
}

myApp.directive('showOnRowHover',

function () {
   return {
      link: function (scope, element, attrs) {
        element.closest('tr').bind('mouseenter', function () {
            element.show();
        });
        element.closest('tr').bind('mouseleave', function () {
            element.hide();

            var contextmenu = element.find('#contextmenu');
            contextmenu.click();

            element.parent().removeClass('open');
        });
     }
  };
})

Answer 1

您可以使用这样的单元格模板:

    $scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
        field: 'name',
        displayName: 'Name'
      },
      {
        field: 'age',
        displayName: 'Age',
        cellTemplate: '<div ng-mouseover="showmenu=true" ng-mouseleave="showmenu=false" class="ngCellText">{{row.getProperty(col.field)}}' +
          '<span class="hmenu" ng-show="showmenu" ng-click=sayHello(row.entity.name)><button>click me</button></span>' +
          '</div>'
      }
    ]
    };

看看这个简化的 Plunker

更新: 呃，我忘了:如果你想让它在行上悬停，你也需要定义一个行模板并将开关放在那里并将值应用到 $parent。

    $scope.gridOptions = {
    data: 'myData',
    rowTemplate: '<div  ng-mouseover="$parent.showmenu=true" ng-mouseleave="$parent.showmenu=false" ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex() }" ' +
      'ng-repeat="col in renderedColumns" ng-class="col.colIndex()" ' +
      'class="ngCell {{col.cellClass}}" ng-cell></div>',
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      field: 'age',
      displayName: 'Age',
      cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field)}}' +
        '<span class="hmenu" ng-show="showmenu" ng-click=sayHello(row.entity.name)><button>click me</button></span>' +
        '</div>'
    }]
    };

Updated Plunker here