ディレクティブのjQuery Datepickerは異なるフォームの同じIDを処理できません

Question

私のHTMLページでは、ng-includeを使用して1つのフォームのインスタンスを動的にインクルード/削除します。したがって、その内部の各モデルは別のスコープで作成する必要があります。私が行うのは、インクリメント・インデックスによるフォームのIDの変更だけですが、入力フィールドは同じIDを保持します。

htmlページは次のようになります。

<form id="form_1"> 
    <label for="birthdate">Applicant DOB</label> 
    <input id="birthdate" ng-model="birthdate" datepicker> 
    ...  
</form> 

<form id="form_2"> 
    <label for="birthdate">Applicant DOB</label> 
    <input id="birthdate" ng-model="birthdate" datepicker> 
    ...  
</form> 

<form id="form_3"> 
    <label for="birthdate">Applicant DOB</label> 
    <input id="birthdate" ng-model="birthdate" datepicker> 
    ...  
</form> 

だから私は問題jQueryのDatePickerのディレクティブを使用して持っている：私はform_1に日付を設定すると

app.directive('datepicker', function() { 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     link : function (scope, element, attrs, ngModelCtrl) { 
      $(function(){ 
       element.datepicker({ 
        onSelect:function (date) { 
         scope.$apply(function() { 
          ngModelCtrl.$setViewValue(date); 
         }); 
        } 
       }); 
      }); 
     } 
    } 
}); 

を、それは結構ですが、私は設定した場合のフォーム2またはのフォーム_3には何も設定されていませんが、常にform_1の値が変更されます。

同じIDを1つのフォームに含めるのは間違っていますが、同じIDを別のフォームに入れることは間違いありません。このライブラリはこのケースを処理できないようです。 （

Answer 1

のIDは、w3cで定義されているように、このページではグローバルに一意です。何かライブラリテストではないので、非ユニークIDをターゲットにしている場合、javascriptライブラリが正しく動作することは期待できません。行動に保証します。この場合

、あなたはおそらくクラスを使用して要素をターゲットにする必要があります。