2016-04-01 50 views
2

Ich möchte ein Popover zusammen mit der Schaltfläche zeigen, wenn es dynamisch gerendert wird (auf den Klick von "Add Button").Fehlausrichtung von Popover für dynamisch erstellte Schaltfläche

Ich kann das Popover mit dem erforderlichen HTML anzeigen, aber wie sollte ich die Spitze des Popover neben der Schaltfläche ausrichten?

Hier ist die 'Plunker' beschreibt das Szenario: https://plnkr.co/edit/GApD3WJhsa7afYAXuLJl?p=preview

<div class="my-button"> 
    <button class="btn btn-success" ng-bind="instance.name"></button> 
    <div class="btn btn-xs btn-danger pull-right" ng-click="remove()">&times;</div> 
</div> 

Antwort

0

Hier ist die Lösung kam ich mit. Siehe aktualisiertes Plunk: http://plnkr.co/edit/Bs0K3FqnIWNjbiMkMygV?p=preview. Innerhalb der Link-Funktion kompilieren Sie den Popover-Inhalt und fügen Sie ihn in einem versteckten <div>.

var compiled = $('<div>', {css: {display: 'none'}}) 
    .append($compile(popoverContent)(scope)).appendTo('body'); 

button.popover({ 
    //... other config 
    content: compiled.html() 
}); 

Sobald der entfernt wird (indem Sie rechts auf das Kreuz-Symbol klicken), die versteckt <div> entfernt werden kann und popover können zerstört werden.

Verwandte Themen