Angular ui-grid events in cell header not firing

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

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

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

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

When using Angular's controllerAs syntax...

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

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

I have tried following solution & it worked for me.

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

$scope.function = myfunction(){ }

来源：https://stackoverflow.com/questions/26621598/angular-ui-grid-events-in-cell-header-not-firing

标签

angularjs

angular-ui-grid