我在我的ui-grid的columDefs中使用了headerCellTemplate(不是ng-grid,而是新的重写)。在html中我有一个复选框。本质上我试图在列的标题中添加一个复选框,这是所有复选框,所以我可以检查所有/无。单元格使用复选框呈现正常。问题是标题中复选框中的ng-change永远不会触发事件。此外,ng模型值永远不会改变。 查看代码时,有一个名为uiGridHeaderCell的指令,所以我必须假设它正在吞噬我的事件以及处于自己的范围内,所以它永远不会在我的范围内设置变量。
有什么方法吗?我遇到的每个例子都没有任何人试图从标题中调用自己的方法(即调用指令范围之外的东西)。
答案 0 :(得分:42)
从@ 3.0.7 Accessing Scope in templates
开始,不再使用外部范围现在在cellTemplate中添加如下的grid.appScope:
ng-click="grid.appScope.myFunction()"
答案 1 :(得分:9)
使用Angular的controllerAs
语法时......
ng-click="grid.appScope.vm.editRow(grid, row)"
答案 2 :(得分:7)
在ui-grid中有一个名为externalScopes
的功能,可能对您有用。 Tutorial is here
这是新的headerCellTemplate
:
<div ng-class="{ 'sortable': sortable }">
<div class="ui-grid-vertical-bar"> </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 }">
</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"> </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"> </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了解更多详情
答案 3 :(得分:2)
我试过以下解决方案&amp;它对我有用。
纳克单击=&#34; grid.appScope $ parent.myFunction()&#34;
$ scope.function = myfunction(){ }