UI-grid传递row.entity与col.field至函数时遇Undefined错误求助

问题背景 #

需要通过row.entity和col.field判断UI-Grid中按钮是否禁用，现有代码如下：

CellTemplate代码 #

cellTemplate:
'<div *ngIf="{{COL_FIELD}}"> '+ 
    '<div class="ui-grid-cell-contents" > {{COL_FIELD}}' +
       '<button  uib-tooltip="Modifica" tooltip-placement="auto" ng-disabled="grid.appScope.modificaDisabled(row.entity, col.field)"'+ 
           'rel= "{{row.entity}}" rol="{{col.field}}" '+ 
           'class="btn btn-xs btn-primary stretto" style="float:right;" edit>'+ 
           '<i class="fa fa-pencil fa-fw"></i>'+ 
       '</button>'+ 
    '</div>'+ 
'</div>'

调用的函数代码 #

var modificaDisabled = function(riga, col){
    console.log(riga)
    console.log(col)
    // 禁用逻辑
}

异常现象 #

调用grid.appScope.modificaDisabled(row.entity, col.field)时，第二个参数col.field为undefined；调换参数顺序为(col.field, row.entity)后，col.field正常，但row.entity变为undefined，调整逗号前后空格无法解决。

解决方案 #

方案一：将参数包装为对象传递 #

修改按钮的ng-disabled属性，把两个参数封装成一个对象：

ng-disabled="grid.appScope.modificaDisabled({rowData: row.entity, colField: col.field})"

同时调整函数接收参数的方式：

var modificaDisabled = function(params){
    console.log(params.rowData); // 对应原row.entity
    console.log(params.colField); // 对应原col.field
    // 禁用逻辑
}

方案二：通过ng-init提前绑定变量 #

在cell模板的父容器中，用ng-init将row.entity和col.field绑定到当前作用域的变量，再传递给函数：

cellTemplate:
'<div *ngIf="{{COL_FIELD}}" ng-init="rowEntity = row.entity; colField = col.field"> '+ 
    '<div class="ui-grid-cell-contents" > {{COL_FIELD}}' +
       '<button  uib-tooltip="Modifica" tooltip-placement="auto" ng-disabled="grid.appScope.modificaDisabled(rowEntity, colField)"'+ 
           'rel= "{{row.entity}}" rol="{{col.field}}" '+ 
           'class="btn btn-xs btn-primary stretto" style="float:right;" edit>'+ 
           '<i class="fa fa-pencil fa-fw"></i>'+ 
       '</button>'+ 
    '</div>'+ 
'</div>'

函数无需修改，保持原参数接收方式即可。

原因分析 #

UI-Grid的cell模板作用域中，直接在ng-disabled的表达式里同时传递两个来自不同上下文的属性时，存在表达式解析优先级或作用域绑定的冲突，导致其中一个参数无法正确获取值。通过包装对象或提前初始化变量，能规避这一解析问题，确保两个参数都能被正确传递。

内容的提问来源于stack exchange，提问作者babukinator