Angular ui-grid 双击行以打开弹出窗口以编辑行

Question

版本：

我正在使用 Angular ui-grid 版本 3.0.0-RC.18 (http://ui-grid.info/)。

问题

我想在 ui-grid 表中实现双击事件。特别是，我想在双击一行时打开一个模式弹出窗口。

按照https://github.com/angular-ui/ng-grid/issues/2228 的建议，我尝试在 rowTemplate 定义中使用 ng-dblclick 指令，但从未触发 'dblclick' 事件。

尽管如此，我找到了一个解决方案，但使用的是我自己创建的指令。我可以在不创建指令的情况下做得更好吗？

任何意见将不胜感激。

代码：

我在Controller的代码如下：

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

}

（其中 dbl-click-row 表示我正在使用 dblClickRow 指令）

我在 View 的代码如下：

<div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" ></div>

我在指令中的代码如下：

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);

            }
        )};

    }

    };
} ]);

Answer 1

嗯，我的问题在 Github 得到了回答：

https://github.com/angular-ui/ng-grid/issues/2228#issuecomment-71912850

我的错误是没有使用外部作用域，并尝试仅使用 ng-dblclick 解决问题。

代码应该是这样的：

在控制器处：

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

}

在视图中：

<div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" external-scopes="gridHandlers"></div>

ui-grid v3.0.0-rc.21 更新：

考虑到不再支持 externalScopes，现在 appScopeProvider 规则。

在视图中：

<div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" ></div>

在控制器中：

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

这是我在 Plnkr 使用模式弹出窗口的示例（使用 angular-ui-bootstrap 完成）：

http://plnkr.co/edit/cq7s9lKn90xTVgNxIC6b?p=preview

请注意，如果您使用较新版本的 ui-bootstrap，则需要将上述 plunkr 中的 $modal 重命名为 $uibModal。

Answer 2

我使用了 Aquiles 解决方案并将范围缩小到 appSCope，请参阅 here。

我已经将代码改写为 showInfo 变为 $scope:

$scope.showInfo = function(row) {
    var modalInstance = $modal.open({
      controller: 'InfoController',
      templateUrl: 'ngTemplate/infoPopup.html',
      resolve: {
        selectedRow: function () {                    
            return row.entity;
        }
      }
   });

   modalInstance.result.then(function (selectedItem) {
     $log.log('modal selected Row: ' + selectedItem);
   }, function () {
     $log.info('Modal dismissed at: ' + new Date());
  });
}

在 gridOptions 中刚刚使用了 appScope：

$scope.gridOptions = {

   showFooter: true,
   enableSorting: true,
   multiSelect: false,
   enableFiltering: true,     
   enableRowSelection: true, 
   enableSelectAll: false,
   enableRowHeaderSelection: false,
   selectionRowHeaderWidth: 35,  
   noUnselect: true,
   enableGridMenu: true,
   columnDefs: [{displayName:'Name',field:'name'},{displayName:'Gender',field:'gender'},{displayName:'Company',field:'company'}],
   rowTemplate: "<div ng-dblclick=\"grid.appScope.showInfo(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>"
};

同样，我添加了 columnDefs 以表明 rowTemplate 不会干扰网格渲染。

Answer 3

使用自定义 rowTemplate 的解决方案可以正常工作。我找到了一个更优雅的解决方案，将事件添加到“ui-grid/ui-grid-row”模板中：

rowTemplate : $templateCache.get('ui-grid/ui-grid-row').replace("<div ", "<div ng-dblclick=\"grid.appScope.onDblClick(row, $event)\" "),

双击事件处理程序是这样的：

$scope.onRowDblClick = function (row) {
    if (row && row.entity) {
        //insert your custom code
    }
};

您必须将依赖项添加到控制器中的 $templateCache。