Angular ui-grid events in cell header not firing

Question

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 i

Answer 1

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

Answer 2

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()"

Answer 3

I have tried following solution & it worked for me.

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

$scope.function = myfunction(){ }

Answer 4

When using Angular's controllerAs syntax...

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

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