0
우리는 현재 데이터를 그리드에 표시하기 위해 ng-grid
을 사용하고 있습니다. 그러나 지금 우리가해야 할 일은 각 행에 대한 메뉴를 만드는 것입니다.ng-grid embeded 메뉴가 숨겨져 있습니다
정상적인 테이블에있는 쉬운 작업입니다. 그러나 ng-grid
을 사용하면 실제 메뉴가 표시되지 않으므로 문제가 발생합니다. 즉
을 볼 수 있습니다 우리 이 단순화에서
$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>'
}
]
};
봐 :이 같은 세포 템플릿을 사용할 수 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');
});
}
};
})