指令中的jQuery Datepicker無法處理不同形式的相同ID

在我的html頁面上，我使用ng-include動態地包含/刪除一個表單的實例。因此，它內部的每個ng模型應該在其獨立的作用域中創建。我所做的唯一的事情是通過增量索引更改表單的ID，但輸入字段保存相同的ID。指令中的jQuery Datepicker無法處理不同形式的相同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日期選擇器指令問題：

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

當我設置日期form_1它是好的，但是當我設置日期form_2或form_3它沒有設置任何東西，但總是改變form_1的值。

我知道在1個表單中有相同的ID是錯誤的，但是有不同形式的相同ID。似乎這個庫不能處理這種情況。（（

來源

2016-10-26 Renat Gatin

標識是網頁全球唯一的，由w3c定義。你不能指望任何JavaScript庫，以正確的行爲，如果你的目標不唯一的ID作爲它不是庫的測試，而且也沒有理由放棄對行爲的保證。

在這種情況下，你可能應使用類關於類的使用定位元素定位元素。

來源

2016-10-26 02:04:06

什麼建議嗎？ –

@RenatGatin沒有，對不起。我更熟悉的反應+迴流比Angular。我只是偶然注意到了表單id。 –

指令中的jQuery Datepicker無法處理不同形式的相同ID

回答

相關問題