在信元头角UI网格事件不触发 [英] Angular ui-grid events in cell header not firing

问题描述

我用在我的UI格（不NG-格但新的改写）的columDefs一个headerCellTemplate。在HTML我有一个复选框。基本上我试图在列，它是所有复选框的头部添加一个复选框，这样我就可以检查所有/没有。细胞呈现细跟的复选框。问题是，在标题中的复选框NG-变化永远不会触发该事件。此外，该NG-模型值不会改变。
纵观code，使用的是所谓的指令，所以uiGridHeaderCell我必须假设它吞噬了我的事件，以及在自己的范围内是这样永远不会设置变量在我的范围。

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).

推荐答案

在UI网有一个功能叫做 externalScopes 这可能是对你有用。 教程是这里

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

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

(Note the input type checkbox on line 4)

此外，我加入 $ event.stopPropagation（）来到达底层DIV停止的事件。

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

在HTML你必须写：

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

看看这个 Plunker 了解更多详情

这篇关于在信元头角UI网格事件不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！