单元格头中的角ui-grid事件不触发

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.

我在我的ui-grid(不是ng-grid，但新的重写)中使用了一个headerCellTemplate。在html中，我有一个复选框。本质上，我尝试在一个列的标题中添加一个复选框，它是所有的复选框，这样我就可以检查所有/none。单元格在复选框中显示良好。问题是，header中的复选框中的ng-change不会触发事件。另外，ng模型值从不改变。看看代码，有一个叫做uiGridHeaderCell的指令，所以我必须假设它在吞噬我的事件，并且在它自己的范围内，所以它不会在我的范围内设置变量。

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

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

4 个解决方案

#1

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

在ui-grid中，有一个名为externalscope的特性可能对您有用。教程在这里

This is the new headerCellTemplate:

这是新的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)

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

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

此外，我还添加了$event. stoppropagation()，以阻止事件到达底层div。

In the HTML you have to write:

在HTML中，你必须写:

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

Look at this Plunker for more details

更多细节请看这个柱塞

#2

External-Scopes is no longer used as of ~3.0.7 Accessing Scope in templates

在模板中，外部作用域不再被用于~3.0.7访问范围。

Now you add grid.appScope like this in your cellTemplate:

现在您添加网格。在您的cellTemplate中这样的appScope:

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

#3

When using Angular's controllerAs syntax...

当使用角的控制器的语法…

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

ng-click = " grid.appScope.vm。editRow(网格、行)”

example: http://plnkr.co/edit/D48xcomnXdClccMnl5Jj?p=preview

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

#4

I have tried following solution & it worked for me.

我试过遵循解决方案&它对我有用。

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

ng-click =“grid.appScope parent.myFunction美元。()”

$scope.function = myfunction(){ }

美元的范围。函数= myfunction(){ }

#1