3

我撞到了挠头！这似乎是一个相当简单的问题......我正在使用 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'
    };

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

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

任何帮助，将不胜感激。谢谢！

4

3 回答 3

5

因此，从 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>'
}

这是一个编辑过的工作插件

于 2014-11-20T02:51:12.217 回答
4

这个问题很老，但我有一个更好的方法——你可以使用 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

于 2015-05-11T17:24:02.893 回答
0

万一其他人好奇，我还发现了使用事件的方法。$emit 可用于在整个父范围层次结构中广播事件。所以以下工作：

将此添加到父范围：

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

并像这样从指令中调用它：

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

这将它正确地传递给父范围。与 $emit 相比，$broadcast 将事件向下发送到作用域层次结构（在这种情况下不适用）。除了事件名称之外，没有其他挂钩的东西。这让它有点方便。

于 2014-11-20T18:46:31.573 回答