jQuery Datepicker funktioniert nur einmal angularJs

Question

In meiner angularjs App verwende ich jquery datepicker innerhalb div.

<div class="col-md-6" ng-show="!viewMode"> 
    <input type="text" readonly focus-me="{{ DateOfBirthFocus }}" id="DateOfBirth" name="DateOfBirth" ng-model="DateOfBirth" placeholder="01-jan-1991" class="form-control date-picker" ng-keydown="DateOfBirth_KeyDown($event)" ng-blur="DateOfBirthFocus=false;" required> 
</div> 

Zum ersten Mal, als ich Seite laden, funktioniert es völlig in Ordnung, aber dann verstecke ich dieses div es wieder mit ng-show und zeigen, nicht picker nicht wie gewünscht funktionieren. Die Kalenderansicht wird nicht geöffnet. Ich habe versucht this solution, aber es hat mir nicht geholfen. Irgendwelche Vermutungen, was ich falsch mache oder was fehlt?

Jede Art von Hilfe wird geschätzt.

Answer 1

Dies liegt wahrscheinlich daran, dass das DOM-Element zum Zeitpunkt der jQuery-Initialisierung nicht verfügbar ist. Fügen Sie eine Direktive, dieses Problem zu umgehen:

myApp.directive('datePickerFoo', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element) { 
      $(element).datepicker(); 

      // And optionally add based on your given link 
      if (!$.datepicker.initialized) { 
       $(document).mousedown($.datepicker._checkExternalClick); 
       $.datepicker.initialized = true; 
      } 
     } 
    } 
}); 

Betrachten Sie die ui-bootstrap Bibliothek von Angular UI-Team geschrieben. Sie benötigen dazu nicht die jQuery-Abhängigkeit.