AngularJS UI Bootstrap-Popover-Outsideclick-Trigger schließt Popover, wenn Element aus ng-repeat entfernt wurde

Ich verwende das AngularJS UI Bootstrap-Popover mit einem Klick-Auslöser und einer Popover-Vorlage. Alles funktioniert wie erwartet, außer in meiner Vorlage habe ich eine ng-Wiederholung mit der Option, eines der Elemente in der Wiederholung zu entfernen. Während das alles funktioniert, schließt sich das Popover, sobald das Objekt entfernt wurde - es ist, als ob es denkt, dass ich außerhalb des Popover geklickt habe. Hier ist ein zupfen zu demonstrieren: http://plnkr.co/edit/vAk3y779eEmLSmIg9kb4?p=preview AngularJS UI Bootstrap-Popover-Outsideclick-Trigger schließt Popover, wenn Element aus ng-repeat entfernt wurde

JS:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) { 
    $scope.dynamicPopover = { 
    templateUrl: 'myPopoverTemplate.html', 
    }; 


    $scope.checklistitems = [ 
    {check: false, text: "item 1"}, 
    {check: false, text: "item 2"}, 
    {check: false, text: "item 3"} 
    ]; 

    $scope.delete = function (item) { 
    var index; 
    index = $scope.checklistitems.indexOf(item); 

    $scope.checklistitems.splice(index, 1); 
    console.log("yo delete: " + item.text) 
    } 

});

html:

<html ng-app="ui.bootstrap.demo"> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

<div ng-controller="PopoverDemoCtrl"> 


    <span>some text to pad</span> 

    <button uib-popover-template="dynamicPopover.templateUrl" 
    type="button" class="btn btn-default" 
    popover-placement="bottom" 
    popover-trigger="outsideClick" 
    >Popover With Template</button> 

    <script type="text/ng-template" id="myPopoverTemplate.html"> 
     <div ng-repeat="item in checklistitems"> 
      {{item.text}} 
      <button ng-click="delete(item)">delete</button> 
     </div> 
    </script> 

</div> 
    </body> 
</html>

Quelle

2016-03-22 mahi-man

Ich hatte das gleiche Problem, ich habe gerade herausgefunden es ist ein Problem, wenn die HTML in den popover Änderungen - so dass ich meinen 'ng-if's zu' ng-show' geändert , könnte Ihre Lösung sein, die gelöschten Elemente zu markieren und sie zu verbergen, und das echte 'Löschen' zu machen, wenn das Popover schließt! siehe: http://plnkr.co/edit/2NifZtWtUuqh8CCBTALf?p=preview –

Dank @Betty St, das ist die Lösung, die ich mit gehen werde. Wenn Sie als Antwort hinzufügen, werde ich es akzeptieren. –

Ich hatte das gleiche Problem, ich habe gerade herausgefunden, dass es ein Problem ist, wenn der HTML im Popover ändert!

Ich änderte meine ng-if s zu ng-show und das Popover wurde nicht geschlossen, wenn Sie auf eine Schaltfläche klicken.

Ihre Lösung könnte sein, die gelöschten Elemente zu markieren und sie zu verstecken, und das echte 'Löschen' zu machen, wenn das Popover schließt!

So: http://plnkr.co/edit/2NifZtWtUuqh8CCBTALf?p=preview

Quelle

2016-06-07 08:51:00

Working Plnkr

entfernen popover-trigger="outsideClick", sollte es funktionieren.

Quelle

2016-03-22 09:19:38

Ja, es funktioniert ohne das, aber ich möchte eigentlich die Fähigkeit für das Popover zu schließen, wenn ich außerhalb des Popover klicken - d. H. Die äußere Klickfunktionalität –

AngularJS UI Bootstrap-Popover-Outsideclick-Trigger schließt Popover, wenn Element aus ng-repeat entfernt wurde

Antwort

Verwandte Themen