web-dev-qa-db-ja.com

Angularセルヘッダーのui-gridイベントが発生しない

Ui-gridのcolumDefsでheaderCellTemplateを使用しています（ng-gridではなく新しい書き換え）。 HTMLにはチェックボックスがあります。基本的に、すべてのチェックボックスである列のヘッダーにチェックボックスを追加しようとしているので、すべて/なしをチェックできます。チェックボックスを使用すると、セルが正常にレンダリングされます。問題は、ヘッダーのチェックボックスのng-changeがイベントを発生させないことです。さらに、ng-model値は変更されません。コードを見ると、uiGridHeaderCellと呼ばれるディレクティブが使用されているため、イベントをゴブリングしているだけでなく、独自のスコープ内にあるため、スコープ内に変数が設定されていないことを前提としています。

これを回避する方法はありますか？私が遭遇したすべての例では、ヘッダー内から独自のメソッドを呼び出そうとする人は誰もいません（つまり、ディレクティブの範囲外の何かを呼び出す）。

angularjsangular-ui-grid
12
Scott

Ui-gridには、externalScopesという機能があります。これは便利な場合があります。 チュートリアルはこちら

これは新しい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>
_

これを見てください プランカー 詳細については

7
mainguy

外部-スコープは〜3.0.7以降使用されなくなりました テンプレートでのスコープへのアクセス

次に、cellTemplateに次のようなgrid.appScopeを追加します。

ng-click="grid.appScope.myFunction()"
42
Marcus Showalter

AngularのcontrollerAs構文を使用する場合...

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

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

9
Homer

私は次の解決策を試しましたが、うまくいきました。

ng-click = "grid.appScope。$ parent.myFunction（）"

$ scope.function = myfunction（）{}

2
Bhaurao Birajdar