2015-10-14 7 views
5

Non voglio mostrare il popover ui.bootstrap usando la direttiva popover-is-open. Ad esempio, nel modello:ui.bootstrap popover-is-open non funziona correttamente

<button class="fa fa-link add-link" 
    uib-popover="popover" 
    popover-is-open="isOpen"> Show popover </i> 

E nel controllore:

angular.module('demoModule').controller('PopoverDemoCtrl', function ($scope) { 
    $scope.isOpen = false;  
}); 

Vedi plunkr

Mi aspetto che popover non dovrebbe mai essere aperto, ma si apre al clic su di esso. Sembra che popover-is-open influenzi solo la prima compilazione angolare. Qualche idea?

upd: In realtà, non voglio mostrare il popover solo in alcuni casi, in altri casi dovrebbe essere mostrato. Ad esempio, ho il popover della finestra di dialogo dei download e voglio mostrarlo solo se la dimensione del file è maggiore di qualche limite.

risposta

5

Il popover-is-open è solo per il comportamento iniziale, vale a dire se viene evaporato su true, quindi il popover si apre immediatamente anche senza un clic. Se si modifica il valore di isOpen in true nel proprio plunkr, lo si vede (my example plunkr).

quello che vuoi è l'attributo popover-enable:

<button class="fa fa-link add-link" 
uib-popover="popover" 
popover-enable="isOpen">Show popover</button> 

aggiornamento per l'aggiornamento domanda:

Sei libero di valutare ogni espressione booleana nell'attributo popover-enable invece della statica isOpen che sempre evaule a false nell'esempio.

ho creato un advanced plunkr per dimostrare che:

<input type="text" ng-model="downloadSize"> 
<button class="fa fa-link add-link" 
uib-popover="popover" 
popover-enable="isOpen()">Show popover</button> 

con il codice di controllo

$scope.isOpen = function() { return $scope.downloadSize > 100; } 

Hai una nuova casella di testo in cui è possibile inserire un numero per simulare la dimensione del download. Quando diventa > 100, il popup sarà abilitato.

+0

Hai ragione, ma cosa succede se non voglio aprire il popover solo in alcuni casi? Ad esempio, ho una finestra di dialogo per il download e voglio mostrarlo solo se la dimensione del file è maggiore di, ad esempio, 100 Mb? –

+0

Sei libero di valutare qualsiasi condizione booleana per l'attributo 'popover-enable'. Aggiornerò la mia risposta con un esempio – Desty

1

Utilizzare il metodo

$scope.$apply(function() { 

$scope.isOpen = false;  

}); 

per l'applicazione di questa proprietà

2

Al fine di gestire lo stato aperto Pentecoste il valore di popover-is-open è necessario impostare popover-trigger="none" o forse popover-trigger="'none'". Come si dice nel docs

Utilizzando il 'none' trigger disabilitare il trigger interno (s), si può quindi utilizzare il popover-è-aperto attributo esclusivamente per mostrare e nascondere il popover.

Problemi correlati