Angular ui-grid ，将自定义消息添加到 editableCellTemplate答案

【问题标题】：Angular ui-grid , add custom message to editableCellTemplateAngular ui-grid ，将自定义消息添加到 editableCellTemplate
【发布时间】：2016-10-04 05:03:17
【问题描述】：

当单元格处于可编辑模式时，我需要向单元格添加自定义错误消息，基本上我只需向可编辑的 html 模板添加消息，如下所示

<a href=\'#\' data-toggle=\'tooltip\' data-placement=\'top\' title=\'error!\' ng-show=\'!inputForm.$valid\'>errMsg - {{customMsg}}</a>

我刚刚将 customMsg 绑定到全局范围只是为了测试目的，但它似乎仍然没有出现。示例plunker 添加在这里，如果你能告诉我我在这里做错了什么，那将是一个很大的帮助

谢谢

【问题讨论】：

标签： angularjs angular-ui-grid ui-grid

【解决方案1】：

你可能想看看这个答案

https://stackoverflow.com/a/28127498/1585304

当您使用 ui-grid 时，您实际上是在一个孤立的范围内工作。

这意味着您不能仅通过在 html 中键入 var 的名称来访问父作用域。

为了访问您的 customMsg 变量，您需要使用 grid.appScope 引用父范围。

您的列定义应该更像这样。

 {
      field: 'company',
      displayName: 'Company',
      enableColumnMenu: false,
      editableCellTemplate: "<div><form name=\"inputForm\">
      <input type=\"INPUT_TYPE\" ng-class=\"'colt' + col.uid\" 
       ui-grid-editor ng-model=\"MODEL_COL_FIELD\"  minlength=3 
       maxlength=10 required><a href=\'#\' data-toggle=\'tooltip\' 
       data-placement=\'top\' title=\'error!\' 
       ng-show=\'!inputForm.$valid\'>errMsg - {{grid.appScope.customMsg}}
       </a></form></div>"
    }

唯一的问题是很难看到消息，因为表单几乎完全被行隐藏了。

希望这会有所帮助。

【讨论】：