单元格头部的Angular ui-grid事件未触发

Question

我在ui-grid（不是ng-grid，而是新的重写版本）的columnDefs中使用headerCellTemplate。 在html中有一个复选框。基本上我正在尝试在仅包含复选框的列的标题中添加复选框，以便我可以全选/取消全选。单元格中的复选框呈现得很好。问题在于标题中复选框的ng-change从未触发事件。此外，ng-model的值也从未更改。 查看代码，发现使用了名为uiGridHeaderCell的指令，因此我必须假设它正吞噬我的事件，并且由于处于其自己的作用域中，它从不设置我的作用域中的变量。

是否有任何解决方法？我找到的每个示例都没有人尝试从标题中调用自己的方法（即调用指令范围之外的内容）。

- Scott

---

你能否请放置jsfiddle或类似的东西？ - dotnetstep

Answer 1

从 ~3.0.7 版本开始，不再使用 External-Scopes。在模板中访问 Scope

现在，您可以像这样在 cellTemplate 中添加 grid.appScope：

ng-click="grid.appScope.myFunction()"

- Marcus Showalter

---

这应该被设置为答案。当前的答案已不再支持。 - Code Whisperer

Answer 2

使用Angular的controllerAs语法时...

ng-click="grid.appScope.vm.editRow(grid, row)"

示例：http://plnkr.co/edit/D48xcomnXdClccMnl5Jj?p=preview

- Homer

Answer 3

在ui-grid中，有一个称为externalScopes的功能，可能对您有用。 这里是教程 这是新的headerCellTemplate：

<div ng-class="{ 'sortable': sortable }">
  <div class="ui-grid-vertical-bar">&nbsp;</div>
  <div class="ui-grid-cell-contents" col-index="renderIndex">
    <input type="checkbox" ng-click="$event.stopPropagation();getExternalScopes().showMe()">{{ col.displayName CUSTOM_FILTERS }}
    <span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">
&nbsp;
</span>
  </div>
  <div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">
    <i class="ui-grid-icon-angle-down">&nbsp;</i>
  </div>
  <div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">
    <input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || ''}}" />
    <div class="ui-grid-filter-button" ng-click="colFilter.term = null">
      <i class="ui-grid-icon-cancel right" ng-show="!!colFilter.term">&nbsp;</i> 
      <!-- use !! because angular interprets 'f' as false -->
    </div>
  </div>
</div>

请注意第4行的输入类型为复选框（input type checkbox）。

同时，我添加了 $event.stopPropagation() 以阻止事件传递到底层div上。

在HTML中你需要写：

<div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>

请查看此Plunker，以了解更多详情。该网页与IT技术有关。

- mainguy

---

哇，原来这一切都与我使用的RC版本有关。我尝试了很多不同的版本，包括那些标记为“稳定”的版本，但唯一能够工作的是你在PLNKR中引用的“不稳定”版本。这真是一个麻烦的过程。谢谢。 - Scott

似乎不再支持externalscopes，现在有什么新的方法可以实现它？ - Z2VvZ3Vp

Answer 4

我尝试了以下解决方案，它对我有效。

ng-click="grid.appScope.$parent.myFunction()"

$scope.function = myfunction(){ }

注：该段内容为HTML代码，不做翻译处理。

- Bhaurao Birajdar