Question

我有点头疼！这似乎是一个相当简单的问题......我正在使用ui-grid角度控件，我试图在cellTemplate中使用自定义指令。我可以成功地在那里得到它，但问题是我无法正确绑定到指令。我可以绑定属性，但不能绑定父级的函数。当我尝试访问已绑定的父函数时，我得到一个未定义的对象错误。

据我所知，我正确设置了绑定和单元格模板：

//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'
    };

当您点击其中一个彩色下拉菜单时，它应该提示“成功”＆＃39; 请在这里查看简单的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>'

我会为你编辑，但即使在这个现代化的接受时代，拥有那么多美元父母也太尴尬了。

所以有几种方法可以解决这个问题，但这是我的看法。保存要在列定义中执行的作用域中的函数，然后使用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

Answer 2

这个问题很老但我有更好的方法 - 您可以使用grid.appScope访问当前的$ scope。所以将app.js中的第20行更改为 - width: 200, cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="grid.appScope.dropdowncombo"></dropdowncss>'

工作的Plunker在这里 - http://plnkr.co/edit/5LiETuG2PEOJhvEcFypF?p=preview

Answer 3

如果其他人好奇我也找到了使用事件的方法。 $ emit可用于在整个父作用域层次结构中广播事件。以下工作如下：

将其添加到父范围：

  $scope.$on('EventDropDown', function () {
      alert('passed up the event successfully');
  });

并从指令中调用它：

<div class="divDropDown" ng-click="$emit('EventDropDown')">

正确地将它传递给父作用域。与$ emit相反，$ broadcast在范围层次结构中发送事件（在此方案中不适用）。除了事件名称之外，没有其他事情可以挂钩。这样很方便。

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

3 个答案: