单元格标题中的 Angular ui-grid 事件未触发 [英] Angular ui-grid events in cell header not firing

问题描述

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

有什么办法解决这个问题吗?我遇到的每个例子都没有人试图从头文件中调用他们自己的方法(即调用指令范围之外的东西).

解决方案

在 ui-grid 中有一个名为 externalScopes 的功能，它可能对您有用.教程在这里

这是新的headerCellTemplate:

<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 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 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><!-- 使用 !!因为 angular 将 'f' 解释为 false -->

(注意第 4 行的输入类型复选框)

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

在 HTML 中你必须写:

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

查看此 Plunker 了解更多详情

I'm using a headerCellTemplate in the columDefs of my ui-grid (not ng-grid but the new rewrite). In the html I have a checkbox. Essentially I am trying to add a checkbox in the header of a column that is all checkboxes so I can check all/none. The cell renders fine with the checkbox. The problem is that the ng-change in the checkbox in the header never fires the event. Additionally the ng-model value never changes. Looking at the code there is a directive used called uiGridHeaderCell so I have to assume that it is gobbling up my event as well as being in its own scope so it never sets the variable in my scope.

Any way around this? Every example I've come across never has anyone trying to call their own method from within the header (ie calling something outside the scope of the directive).

解决方案

In ui-grid there is a feature called externalScopes which may be useful to you. Tutorial is here

This is the new 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>

(Note the input type checkbox on line 4)

Also I added $event.stopPropagation() to stop the event from reaching the underlying div.

In the HTML you have to write:

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

Look at this Plunker for more details

这篇关于单元格标题中的 Angular ui-grid 事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！