12

我在我的 ui-grid 的 columDefs 中使用了 headerCellTemplate（不是 ng-grid，而是新的重写）。在 html 中，我有一个复选框。本质上，我试图在所有复选框的列标题中添加一个复选框，以便我可以检查所有/无。复选框可以很好地呈现单元格。问题是标题中复选框中的 ng-change 永远不会触发事件。此外，ng-model 值永远不会改变。查看代码，使用了一个名为 uiGridHeaderCell 的指令，因此我必须假设它正在吞噬我的事件以及在它自己的范围内，因此它永远不会在我的范围内设置变量。

有什么办法吗？我遇到的每个示例都没有人试图从标头中调用他们自己的方法（即调用指令范围之外的东西）。

4

4 回答 4

43

从 ~3.0.7 开始不再使用 External-Scopes在模板中访问范围

现在你像这样在你的 cellTemplate 中添加 grid.appScope：

ng-click="grid.appScope.myFunction()"
于 2015-11-18T23:29:03.027 回答
9

当使用 Angular 的controllerAs语法时...

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

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

于 2017-01-27T22:27:32.810 回答
7

在 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 行的输入类型复选框）

我还添加$event.stopPropagation()了阻止事件到达底层 div。

在 HTML 中，您必须编写：

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

查看此Plunker了解更多详情

于 2014-10-29T10:47:19.760 回答
2

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

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

$scope.function = myfunction(){ }

于 2018-02-23T12:37:42.487 回答