私は最初の列にプログレスバーでAngularjs UIのグリッドを使用していますし、私のグリッドオプションは以下のとおりですAngularjsのUIグリッド

Question

のカスタムテンプレートのセルの上にポップオーバーを必要とする：

ctrl.gridOptions = {}; 

ctrl.gridOptions.columnDefs = [{ 
     field: 'completeStatus', 
     cellTemplate: '<span>{{row.entity.completeStatus}} % </span> <uib-progressbar value="row.entity.completeStatus"> </uib-progressbar>', 
     width: 100 
    }, 

    { 
     field: 'invoiceNum' 
    } 
]; 

HTML：

<div id="regGrid" ui-grid="ctrl.gridOptions" class="reg-grid"></div> 

うまくいきます。今私はグリッドの最初のセルをホバリングするときにブートストラップポップオーバーを表示したい、私はフィールド'completeStatus'とセルを意味します。どのように構成するのか手助けできますか？

Answer 1

popover属性をセルテンプレートに追加し、ポップオーバーテンプレートをコンポーネントhtmlに配置します。このように：

コンポーネントHTML：

これは単なるクロージングルート</div>前に、HTMLの下部に配置されます。

<script type="text/ng-template" id="cellPopover.html"> 
     <div>Your popover Template</div> 
    </script> 

コンポーネントコントローラ： あなたのセルテンプレートにポップオーバーの属性を追加します。
1. uib-popover-template="'cellPopover.html'"
2. popover-trigger="mouseenter"
3. popover-placement="bottom"

：私はあなたのような実際の属性を配置します popover attributes書いた

ctrl.gridOptions.columnDefs = [{ 
     field: 'completeStatus', 
     cellTemplate: '<div popover attributes><span>{{row.entity.completeStatus}} % </span> <uib-progressbar value="row.entity.completeStatus"> </uib-progressbar></div>', 
     width: 100 
    }