angularjs - example - Angular UI Bootstrap Popover-Cómo agregar un botón de cierre
popover angularjs (3)
Tengo una tabla con una ventana emergente para cada celda como en el siguiente ejemplo:
La llamada a popover:
<td ng-repeat="i in c.installments" ng-class="{ ''first'' : i.first, ''last'' : i.last, ''advance'' : i.advance.value > 0, ''edited'' : i.edited, ''final-installment'' : i.last }" popover-trigger="{{ popoverFilter(i) }}" popover-placement="top" popover-title="{{i.id == 0 ? ''Advance'' : ''Installment '' + i.id}}" popover-append-to-body="true" popover-template="popoverTemplate(i)" ng-init="payment= i; newpayment= i.amount.rounded_value" >
La plantilla popover:
<script type="text/ng-template" id="editPopoverTemplate.html">
<form name="editPayment">
<h2>{{payment.amount.value|currency:undefined:cents}}</h2>
<div class="form-group" ng-class="{ ''has-error'' : editPayment.newpayment.$invalid }">
<label>New value:</label>
<input type="number" name="newpayment" ng-model="newpayment" class="form-control no-spinner" step="1" min="10" required>
<span ng-messages="editPayment.newpayment.$error" class="help-block" role="alert">
<span ng-message="required">The value is mandatory</span>
<span ng-message="min">The value is too low</span>
<span ng-message="max">The value is too hight</span>
</span>
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn" type="button">Cancel</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary" type="button" ng-disabled="editPayment.$invalid">Save</button>
</div>
</div>
</form>
</script>
Necesito cerrar la ventana emergente a través de un botón "Cancelar" dentro de la ventana emergente. ¿Es posible? ¿Necesito extender la biblioteca Angular UI Bootstrap para hacer eso?
Cualquier ayuda es apreciada.
La solución sugerida en la respuesta vinculada cierra la ventana emergente cuando el usuario hace clic dentro de la ventana emergente o fuera de la ventana emergente, pero necesito cerrarla con el botón "cerrar" dentro de la ventana emergente.
Comenzando con la versión 0.13.4 de Angular UI Bootstrap, hemos agregado la capacidad de cerrar de forma programada la información sobre herramientas y los elementos emergentes mediante el atributo booleano tooltip-is-open popover-is-open .
Esta solución para varios isOpen ng-repeat través del campo isOpen de popover.
angular.module(''ui.bootstrap.demo'', [''ui.bootstrap'']).controller(''PopoverDemoCtrl'', function ($scope) {
$scope.template = ''myPopoverTemplate.html'';
$scope.close = function(e) {
angular.element(e.target).parent().parent().parent().parent().scope().$parent.isOpen = false;
}
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="ui.bootstrap.demo">
<div ng-controller="PopoverDemoCtrl">
<button ng-repeat="item in [''First Popover'',''Second Popover'',''Third Popover'']" popover-placement=''bottom'' uib-popover-template="template" popover-title="{{item}}" type="button" class="btn btn-default">{{item}}</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="form-group">
<button class=''btn btn-danger'' ng-click=''close($event)''>Close Me</button>
</div>
</script>
</div>
</body>
La solución adecuada utilizando el nuevo atributo popover-is-open , como se menciona en @icfantv a continuación, permite el uso de los ámbitos del controlador. Puse un ejemplo en vivo en Codepen , y es así:
app = angular.module(''ui.bootstrap.demo'', [''ui.bootstrap'']);
app.controller(
''myPopoverCtrl'', [''$scope'',
function($scope) {
// query popover
$scope.myPopover = {
isOpen: false,
templateUrl: ''myPopoverTemplate.html'',
open: function open() {
$scope.myPopover.isOpen = true;
$scope.myPopover.data = ''Hello!'';
},
close: function close() {
$scope.myPopover.isOpen = false;
}
};
}
]);
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js">
</script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body
ng-app="ui.bootstrap.demo"
class="container">
<button
class="btn btn-danger"
ng-controller="myPopoverCtrl"
popover-template="myPopover.templateUrl"
popover-title="This is a popover"
popover-placement="bottom"
popover-is-open="myPopover.isOpen"
ng-click="myPopover.open()">Click me!</button>
<script type="text/ng-template"
id="myPopoverTemplate.html">
<h2 ng-bind="myPopover.data" />
<button class="btn btn-success"
ng-click="myPopover.close()">Close me!</button>
</script>
</body>
Respuesta original:
Pasé los últimos dos días en este problema, y finalmente se me ocurrió un truco bastante simple. Esto va en mi controlador:
$scope.close = function(e) {
el = angular.element(e.target).closest("td"); // `td` is the parent of my clickable
// element, in this case a `span`
$timeout(function() { // need $timeout so we don''t conflict with the digest loop
el.children(":first").trigger(''close''); // couldn''t select the `span` element directly
});
},
Ahora configuramos el disparador de cierre en el proveedor:
app.config([''$tooltipProvider'', function($tooltipProvider){
$tooltipProvider.setTriggers({
''click'': ''close'', // Clicks now only open the tooltip, ''close'' events close it.
});
}]);
Y en mi plantilla personalizada de popover HTML:
<button type="button"
class="btn btn-sm btn-success pull-right"
ng-click="close($event)">Close</button>
Voila! Ahora puedo cerrar la ventana emergente a través del botón!