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

I need to add a custom error message to cell when it is in editable mode, basically i just need to add message to the editable html template as follow

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

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

i have just bind the customMsg to the global scope just for testing purposes , but still it doesnt seems to be appearing. sample plunker added here, it would be a great help if you can tell me what i am doing wrong here

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

Thanks

1 个解决方案

#1

You might want to take a look at this answer

你可能想看看这个答案

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

When you are working with the ui-grid, you are actually working in an isolated scope.

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

This means that you cannot access to the parent scope simply by type the name of the var into your html.

这意味着只需在html中键入var的名称,就无法访问父作用域。

In order to access to your customMsg variable, you need to refer to the parent scope using grid.appScope.

要访问customMsg变量,需要使用grid.appScope引用父作用域。

Your column definition should look more like this.

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

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

The only problem is that is really hard to see the message since the form is almost completely hidden by the row.

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

Hope this helps.

希望这可以帮助。

#1