角UI电网双击行以打开弹出编辑一行 [英] Angular ui-grid double click row to open pop-up for editing a row
问题描述
版本:
我采用了棱角分明的UI网版本3.0.0-RC.18( http://ui-grid.info / )。
问题
我要实现在UI的网格表双击事件。我特别想开在行时双击模式弹出。
我试图用rowTemplate定义范围内的NG-DBLCLICK指令,因为建议在的 https://github.com/angular-ui/ng-grid/issues/2228 ,但DBLCLICK事件从来没有发射。
不过,我发现了一个解决方案,但利用自己创建的指令。我可以做的更好,而无需创建一个指令?
任何意见将是AP preciated。
code:
在我的控制器code是如下:
$ scope.onDblClick =功能(行){
VAR URL ='//google.com';
$ window.open(URL,_blank,HEIGHT = 600,宽度= 800,工具栏=没有,位置=没有,菜单=没有,标题栏=无);
}//定义新的矛盾模拟网格行为
$ scope.myGridOptions = {
showFooter:假的,
enableSorting:真实,
多选:假的,
enableFiltering:真实,
enableRowSelection:真实,
enableSelectAll:假的,
enableRowHeaderSelection:假的,
enableGridMenu:真实,
noUnselect:真实,
onRegisterApi:功能(gridApi){
$ scope.gridApi = gridApi;
},
rowTemplate:< DIV NG-DBLCLICK = \\onfocus此(行)\\NG重复= \\(colRenderIndex,COL)的colContainer.renderedColumns轨道由col.colDef.name \\类= \\用户界面,并网电池\\纳克级= \\{UI网排头细胞:col.isRowHeader} \\UI网格细胞DBL单击行>< / DIV>中}
(凡DBL单击行指示我现在用的是dblClickRow指令)
在查看我的code是如下:
< DIV ID =myGridUI格=myGridOptionsUI格选择UI并网调整柱类=gridTable>< / DIV&GT ;
在该指令我的code是如下:
VAR angularStartDirectives = angular.module('angularStart.directives',[]);angularStartDirectives.directive('dblClickRow',['$编译,$解析',函数($编译,$解析){
返回{
优先级:-190,//默认uiGridCell指令后运行
限制:'A',
适用范围:假的, 编译:函数($元素,属性){ //获取在NG-DBLCLICK的UI网格功能
变种FN = $解析(ATTR ['ngDblclick'] / * * interceptorFn / null的,/ * * expensiveChecks / TRUE); 返回功能ngEventHandler(范围,元素){ element.on('DBLCLICK',函数(事件){ VAR回调函数=(){ 如果($ scope.gridApi.grid.selection.lastSelectedRow)
{
FN($范围,{$事件:事件,排:$ scope.gridApi.grid.selection.lastSelectedRow.entity});
}
}; 。$ $范围适用(回调); }
)}; } };
}]);
好吧,我的问题得到回答在Github上:
https://github.com/angular-ui/ NG-网/问题/ 2228#issuecomment-71912850
我的错误是不使用外部范围,并尝试解决,只有NG-DBLCLICK的问题。
在code应该是这样的:
在控制器:
$ scope.gridHandlers = { onfocus此:函数(行){
VAR URL ='//google.com';
$ window.open(URL,_blank,HEIGHT = 600,宽度= 800,工具栏=没有,位置=没有,菜单=没有,标题栏=无);
}
}$ scope.myGridOptions = {
showFooter:假的,
enableSorting:真实,
多选:假的,
enableFiltering:真实,
enableRowSelection:真实,
enableSelectAll:假的,
enableRowHeaderSelection:假的,
enableGridMenu:真实,
noUnselect:真实,
onRegisterApi:功能(gridApi){
$ scope.gridApi = gridApi;
},
rowTemplate:< DIV NG-DBLCLICK = \\getExternalScopes()onfocus此在colContainer.renderedColumns轨道(行)\\NG重复= \\(colRenderIndex,列)由col.colDef.name \\类= \\ UI的网格单元\\纳克级= \\{UI网排头细胞:col.isRowHeader} \\UI-格电池>< / DIV>中}
在查看:
< DIV ID =myGridUI格=myGridOptionsUI格选择UI并网调整柱类=gridTable外部范围=gridHandlers >< / DIV>
更新UI电网V3.0.0-rc.21:
考虑到externalScopes不再支持,现在appScopeProvider规则。
在该视图:
< DIV ID =myGridUI格=myGridOptionsUI格选择UI并网调整柱类=gridTable>< / DIV&GT ;
在控制器:
$ scope.myGridOptions = {
showFooter:假的,
enableSorting:真实,
多选:假的,
enableFiltering:真实,
enableRowSelection:真实,
enableSelectAll:假的,
enableRowHeaderSelection:假的,
enableGridMenu:真实,
noUnselect:真实,
onRegisterApi:功能(gridApi){
$ scope.gridApi = gridApi;
},
appScopeProvider:{
onfocus此:函数(行){
VAR URL ='//google.com';
$ window.open(URL,_blank,HEIGHT = 600,宽度= 800,工具栏=没有,位置=没有,菜单=没有,标题栏=无);
}
},
rowTemplate:< DIV NG-DBLCLICK = \\grid.appScope.onDblClick(行)\\NG重复= \\(colRenderIndex,COL)的colContainer.renderedColumns轨道由col.colDef.name \\类= \\ UI的网格单元\\纳克级= \\{UI网排头细胞:col.isRowHeader} \\UI-格电池>< / DIV>中
}
下面是使用模式弹出我在Plnkr例子(与角UI的引导完成):
http://plnkr.co/edit/cq7s9lKn90xTVgNxIC6b?p=$p$ PVIEW
请注意,如果您使用的UI引导的新版本,则需要在上面plunkr至$ uibModal重命名$模式。
VERSION:
I am using Angular ui-grid version 3.0.0-RC.18 (http://ui-grid.info/).
PROBLEM
I want to implement a double-click event in an ui-grid table. In particular, I want to open a modal pop-up when double-clicking at a row.
I tried to use a ng-dblclick directive inside the rowTemplate definition as is suggested at https://github.com/angular-ui/ng-grid/issues/2228 , but 'dblclick' event is never fired.
Nevertheless, I found a solution, but using a directive created by my own. Can I do it better, without creating a directive?
Any comment would be appreciated.
CODE:
My code at the Controller is as follows:
$scope.onDblClick = function(row) {
var url = '//google.com';
$window.open(url, "_blank", "height=600,width=800,toolbar=no,location=no,menubar=no,titlebar=no");
}
// Define the New Conflicts Simulation GRID behavior
$scope.myGridOptions = {
showFooter: false,
enableSorting: true,
multiSelect: false,
enableFiltering: true,
enableRowSelection: true,
enableSelectAll: false,
enableRowHeaderSelection: false,
enableGridMenu: true,
noUnselect: true,
onRegisterApi: function (gridApi){
$scope.gridApi = gridApi;
},
rowTemplate: "<div ng-dblclick=\"onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell dbl-click-row></div>"
}
(Where dbl-click-row indicates I am using the dblClickRow directive)
My code at the View is as follows:
<div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" ></div>
My code at the Directive is as follows:
var angularStartDirectives = angular.module('angularStart.directives', []);
angularStartDirectives.directive('dblClickRow', ['$compile', '$parse', function($compile, $parse) {
return {
priority : -190, // run after default uiGridCell directive
restrict : 'A',
scope : false,
compile: function($element, attr) {
// Get the function at ng-dblclick for ui-grid
var fn = $parse(attr['ngDblclick'], /* interceptorFn */ null, /* expensiveChecks */ true);
return function ngEventHandler(scope, element) {
element.on('dblclick', function(event) {
var callback = function() {
if ($scope.gridApi.grid.selection.lastSelectedRow)
{
fn($scope, {$event:event, row: $scope.gridApi.grid.selection.lastSelectedRow.entity });
}
};
$scope.$apply(callback);
}
)};
}
};
} ]);
Well, my question was answered at Github:
https://github.com/angular-ui/ng-grid/issues/2228#issuecomment-71912850
My mistake was not to use external-scopes, and try to solve the problem with ng-dblclick only.
The code should be like this:
At the Controller:
$scope.gridHandlers = {
onDblClick : function(row) {
var url = '//google.com';
$window.open(url, "_blank", "height=600,width=800,toolbar=no,location=no,menubar=no,titlebar=no");
}
}
$scope.myGridOptions = {
showFooter: false,
enableSorting: true,
multiSelect: false,
enableFiltering: true,
enableRowSelection: true,
enableSelectAll: false,
enableRowHeaderSelection: false,
enableGridMenu: true,
noUnselect: true,
onRegisterApi: function (gridApi){
$scope.gridApi = gridApi;
},
rowTemplate: "<div ng-dblclick=\"getExternalScopes().onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell ></div>"
}
At the View:
<div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" external-scopes="gridHandlers"></div>
Update for ui-grid v3.0.0-rc.21:
Considering that externalScopes is no longer supported, and now appScopeProvider rules.
In the view:
<div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" ></div>
In the controller:
$scope.myGridOptions = {
showFooter: false,
enableSorting: true,
multiSelect: false,
enableFiltering: true,
enableRowSelection: true,
enableSelectAll: false,
enableRowHeaderSelection: false,
enableGridMenu: true,
noUnselect: true,
onRegisterApi: function (gridApi){
$scope.gridApi = gridApi;
},
appScopeProvider: {
onDblClick : function(row) {
var url = '//google.com';
$window.open(url, "_blank", "height=600,width=800,toolbar=no,location=no,menubar=no,titlebar=no");
}
},
rowTemplate: "<div ng-dblclick=\"grid.appScope.onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell ></div>"
}
Here is my example at Plnkr using a modal popup (done with angular-ui-bootstrap):
http://plnkr.co/edit/cq7s9lKn90xTVgNxIC6b?p=preview
Note that if you use a newer version of ui-bootstrap, you will need to rename $modal in the above plunkr to $uibModal.
这篇关于角UI电网双击行以打开弹出编辑一行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!