2016-08-15 105 views
0

在我的angularjs應用程序中,我在div中使用jquery datepickerjQuery datepicker只能工作一次angularJs

<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> 

這是第一次,當我加載網頁,它工作完全正常,但後來我躲在這個div使用ng-show並再次顯示,按要求日期選擇器不能正常工作。它不會打開日曆視圖。我試過this solution但它沒有幫助我。任何猜測我做錯了什麼或錯過了什麼?

任何形式的幫助將不勝感激。

+0

你能提供一個有效的plunkr /小提琴 –

回答

0

這可能是因爲在jQuery初始化時DOM元素不可用。添加指令來解決此問題:

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; 
      } 
     } 
    } 
}); 

考慮使用ui-bootstrap庫通過角的UI團隊編寫的。你不需要這個jQuery依賴。