AngularJS ui-grid 问题与 cellTemplate 中的指令有关

Question

我撞到头了!这似乎是一个相当简单的问题......我正在使用 ui-grid Angular 控件，并且我正在尝试在 cellTemplate 中使用自定义指令。我可以成功地将它放在那里，但问题是我无法正确绑定(bind)到指令。我可以绑定(bind)属性，但不能绑定(bind)父级的函数。当我尝试访问已绑定(bind)的父函数时，出现对​​象未定义错误。

据我所知，我正确设置了绑定(bind)和单元格模板:

//in columndefs:
{
        name: 'item', displayName: 'Status',
        width: 200, cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="dropdowncombo"></dropdowncss>'
},

//directive declaration:
app.directive('dropdowncss', function () {
    return {
        restrict: 'E',
        scope:
            {
                item: '=',
                doDrop: '&'
            },
        controller: 'DropDownCSSCtrl',
        templateUrl: 'dropdowncss.html'
    };

当您单击其中一个彩色下拉菜单时，它应该会提示“成功”请在此处查看简单的 plunker:

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

任何帮助将不胜感激。谢谢!

Answer 1

所以从 cellTemplate 被编译的范围来看，你的范围很深，你的函数 dropdowncombo 不存在。这就是你不确定的原因。在该范围内，您的 dropdowncombo 函数实际上是 $parent.$parent.$parent.$parent.$parent.$parent.dropdowncombo。现在我永远不会建议您使用它，因此您应该设计一种替代方法来从该单元格模板中传递您的作用域函数。

要查看您的 plunker 工作，请将 app.js 的第 20 行更改为

width: 200, cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="$parent.$parent.$parent.$parent.$parent.$parent.dropdowncombo"></dropdowncss>'

我会为您进行编辑，但即使在这个被接受的现代时代，拥有这么多 $parents 也太尴尬了。

所以有几种方法可以解决这个问题，但这是我的看法。将您想要在列定义中执行的函数保存在您的范围内，然后使用 col.colDef.func 调用它

更新app.js中的列定义如下:

{
     name: 'item', displayName: 'Status',
     handleClick: $scope.dropdowncombo, 
     width: 200,  
     cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="col.colDef.handleClick"></dropdowncss>'
}

这是 edited working plunker