ui-grid textarea 编辑后不关闭答案

【问题标题】：ui-grid textarea doesn't close after editui-grid textarea 编辑后不关闭
【发布时间】：2019-10-01 16:33:35
【问题描述】：

当我在网格中完成编辑文本区域时，编辑模式不会关闭。

在这个 Plunker 中，如果你双击 Title 下的其中一个单元格，textarea 会正确打开，但在我单击单元格外后不会关闭。

http://plnkr.co/edit/9jrzziWOP6hWWQ1Gab39?p=preview

<div ui-grid="{ data: data, columnDefs: columnDefs }" ui-grid-edit></div>

var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', function ($scope) {
   $scope.data = [
     { name: 'John', title: 'CEO' },
     { name: 'Jane', title: 'Developer' }
   ];

   $scope.columnDefs = [
     {name: 'name', enableCellEdit: false},
     { name: 'title',
        cellEditableCondition: true,
        enableCellEdit: true,                                
        editType: 'textarea',
        editableCellTemplate: '<textarea rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'
     }
   ];
 }]);

【问题讨论】：

标签： angularjs ui-grid

【解决方案1】：

你的问题与这条线有关：

editableCellTemplate: '<textarea rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'

在uiGrid-edit 的 API 中，它声明 您必须具有有效的 html、templateCache Id 或 url，以便在调用编辑模式时返回要编译的 html 内容。在您的情况下，您没有包含让 textarea 退出编辑模式的方法。要解决此问题，请在标签中包含ui-grid-editor，如下所示。

editableCellTemplate: '<textarea ui-grid-editor rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'

【讨论】：

这解决了编辑模式不退出的问题，但是当我按 Enter 在文本区域中添加新行时，它会关闭编辑模式而不是添加新行。
转义键在上面的 uiGrid 文档中提到，据我所知不能被覆盖。我怀疑网格行高的样式也有点像噩梦，因为每一行都必须是动态的，基于带有 textarea 的列的内容。我可能会做的是，而不是使用 cellTemplate ，而是包含一个打开模式以查看数据的链接。一旦进入模态，您就可以随意调整您认为合适的文本。
这是一个绝妙的主意，我会走那条路的，谢谢你的帮助。