Entfernen Angular UI Bootstrap Datepicker Popup auf Körper

Ich benutze Angular UI Bootstrap Datepicker Popup mit der Option datepicker-append-to-body="true". Somit wird das Popup auf <body> gerendert. In meinem speziellen Szenario muss ich das DOM-Element entfernen, das den Datepicker enthält. Sobald das Element entfernt wurde (mit element.remove()) bleibt das Popup im Körper. Wie soll ich den Datepicker entfernen, damit das Popup auch korrekt entfernt wird?Entfernen Angular UI Bootstrap Datepicker Popup auf Körper

Hier demonstriert die Plunker die Frage: http://plnkr.co/edit/zFew72PpY0E2ETwMKRpv?p=preview

Ich weiß, dass nicht der richtige Weg in Angular wie dies ein Element entfernt ist, aber ich bin auf Integration bestehender jQuery Widget mit kantigem, und dies ist im bestehenden Code getan. Ich versuche einen Weg zu finden, dies zu beheben.

Jede Hilfe wird geschätzt.

bearbeiten

Sorry, ich glaube, einige zusätzliche Informationen, den Fall zu klären benötigt wird:

Wie ich bereits erwähnt, ich integrieren, um ein jQuery-Plugin mit kantigem. Das ist Raster. Grid kann eine Bearbeitungszeile haben. Rasterbenutzer können einen Angular UI Datepicker in die Bearbeitungszeile einfügen, um das Datumsfeld zu bearbeiten. Sobald ein Benutzer auf Save (oder Cancel) klickt, wird die Bearbeitungszeile mit $element.remove() entfernt. Dies geschieht im externen Lib-Code. Was ich tun kann, ist Patch zu entfernen Code und rufen Sie einige Aufräumen Code. Die Frage ist, was dieser Bereinigungscode sein könnte, also wird es den Datepicker bereinigen.

ng-if, ist leider keine Option, da Patch-Code nichts über den Inhalt der Zelle und Felder des Bereichs weiß. Dieser Code ist generisch, während datepicker vom Grid-Benutzer in die Zelle eingefügt wird. In der Tat könnte es ein anderes Widget sein.

Quelle

2016-06-26 tabalin

jemals gehört, über 'ngIf'? –

Sie können ng-if verwenden, um zu entfernen oder zu Ihrem HTML hinzuzufügen. hier ist ein plunker:

$scope.showDatePanel = true; 
$scope.removePanel = function() { 
    $scope.showDatePanel = false; 
    }

in Ihrem html:

<div id="panelToBeRemoved" ng-if="showDatePanel" class="row"> 
     <div class="col-md-6"> 
     <p class="input-group"> 
      <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" datepicker-append-to-body="true" is-open="popup.opened" /> 
     </p> 
     </div> 
    </div>

hoffen, es hilft.

Quelle

2016-06-26 06:33:25

Vielen Dank für Ihre Antwort, der Fall ist ein bisschen komplizierter. Bitte, siehe Bearbeiten. Vielen Dank! – tabalin

uib-datepicker verwenden Sie ng-if. es ist gemein, wenn Sie true zuweisen in ist offen Attribut wird dynamisch in Ihren Körper anhängen und wenn zugewiesen false dann wird es automatisch in Ihrem Körper-Tag zerstören. Wenn Sie also drücken, entfernen Sie das Element Schaltfläche als zuweisen is-open false. ändern in Ihrer example.js Datei ->

$scope.open = function() { 
    if($window.document.getElementById("panelToBeRemoved") != null){ 
     $scope.popup.opened = true; 
    } 
};

Quelle

2016-06-26 06:47:13 Sandeep

Vielen Dank für Ihre Antwort, der Fall ist ein bisschen komplizierter. Bitte, siehe Bearbeiten. Vielen Dank! – tabalin

@Sandeep, nein, tut es nicht. Sieh dir das an: https: // github.com/angular-ui/bootstrap/blob/master/src/datepickerPopup/popup.js # L148 –

Entfernen Angular UI Bootstrap Datepicker Popup auf Körper

Antwort

Verwandte Themen