anglejs – 单元格标题中的角度ui-grid事件不触发

发布时间：2020-12-17 09:42:09 所属栏目：安全来源：网络整理

导读：我在我的ui网格的columDefs中使用了一个headerCellTemplate(不是ng-grid,而是新的重写).在html中我有一个复选框.本质上,我试图在列的标题中添加一个复选框,这是所有复选框,所以我可以检查所有/无.复选框使单元格呈现正确.问题是,标题中的复选框的ng更改不会

我在我的ui网格的columDefs中使用了一个headerCellTemplate(不是ng-grid,而是新的重写).在html中我有一个复选框.本质上,我试图在列的标题中添加一个复选框,这是所有复选框,所以我可以检查所有/无.复选框使单元格呈现正确.问题是,标题中的复选框的ng更改不会触发该事件.此外,ng模型值不会更改.
看一下代码,这里有一个使用uiGridHeaderCell的指令,所以我必须假设它正在吞噬我的事件,并且在自己的范围内,所以它永远不会在我的范围内设置变量.

这样吗？我遇到的每一个例子从来没有人试图从标题内调用自己的方法(即调用指令范围之外的东西).

在ui-grid中有一个称为externalScopes的功能,可能对您有用. 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行的输入类型复选框)

另外我添加了$event.stopPropagation()来阻止事件到达底层的div.

在HTML中你必须写：

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

看这个Plunker了解更多细节

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!