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

【问题标题】：AngularJS ui-grid issue with directive in cellTemplateAngularJS ui-grid 问题与 cellTemplate 中的指令有关
【发布时间】：2014-11-20 01:03:29
【问题描述】：

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

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

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案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

【讨论】：

父层次结构，可能不是问题，而是父级本身可能是一个孤立的范围。
谢谢！我自己永远也想不通。对我来说，绑定函数仅在指令是共享父范围的控件的直接子级时才有效，这对我来说并不直观。我想知道这样做的正确“角度”方式是什么？在正常的应用程序中，我们会使用带有事件处理的观察者模式。也许这将是最好的方法？或者也许是工厂？现在我认为添加 handleClick 功能很好。谢谢！
我忘了问 - 最后一个问题：上面包含的方法是否会复制每个单元格的功能代码？或者“handleClick”只是一个指向 $scope.dropdowncombo 的指针，这意味着函数 $scope.dropdowncombo 不会为每个单元格重复。我问是因为在我的最终项目中，单个网格中将有数百个甚至更多这样的下拉菜单，我需要考虑性能。谢谢！
它是一个引用（就像一个指针），所以没有重复。此外，该引用仅添加一次到单元格已引用的列定义中。如果你遇到性能问题，那肯定不是因为这个。 GLHF。

【解决方案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

【讨论】：

【解决方案3】：

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

将此添加到父范围：

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

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

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

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

【讨论】：