benötigen popover über benutzerdefinierte Vorlage Zelle AngularJS ui Gitter

Question

I AngularJS ui Gitter mit Fortschrittsbalken in der ersten Spalte und meine Rasteroptionen verwende sind unten dargestellt:

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> 

Welche funktioniert gut. Nun möchte ich Bootstrap-Popover anzeigen, wenn ich die erste Zelle des Gitters schwebe, also die Zelle mit dem Feld 'completeStatus'. Kann mir jemand helfen, es zu konfigurieren?

Answer 1

Fügen Sie der Zellenvorlage Popover-Attribute hinzu, und legen Sie eine Popover-Vorlage in Ihrer Komponente html fest. Wie folgt aus:

Component HTML:

Dies wird am Ende des HTML befinden kurz vor der Schließung Wurzel </div>.

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

Component Controller: die popover Hinzufügen von Attributen für Ihr Handy-Vorlage.

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 
    } 

Wo ich schrieb popover attributes Sie werden die tatsächlichen Attribute platzieren wie:
1. uib-popover-template="'cellPopover.html'"
2. popover-trigger="mouseenter"
3. popover-placement="bottom"