Изолирующие области с несколькими jquery ui date pickers в угловом

Question

У меня возникли проблемы с изоляцией областей действия директивы поиска даты ниже.

(function(){ 
'use strict'; 

angular.module('ganeshaApp') 
.directive('datePickerSearch', function(){ 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelCtrl){ 
      $(function(){ 
       element.datepicker({ 
        dateFormat: 'd/m/yy', 
        onSelect: function(date){ 
         scope.date = date; 
         scope.$apply(); 
        } 
       }) 
      });   
     } 
    } 
}) 
})(); 

В моей первой попытке я попытался с помощью этого кода, но, как ожидается, изменяя один вход с нг-моделью = «дата» обновляет все входы ссылающихся директиву с той же нг-моделью.

    <tr> 
         <td>Publication Date:</td> 
         <td greyed-dates> 
          between 
          <div class="start inner-addon right-addon"> 
           <i class="glyphicon glyphicon-calendar"></i> 
           <input type="text" ng-model="date" 
             date-picker-search placeholder="dd/mm/yyyy"/> 

          </div> 
          <span>and</span> 
          <div class="end inner-addon right-addon"> 
           <i class="glyphicon glyphicon-calendar"></i> 
           <input type="text" ng-model="date" 
             date-picker-search placeholder="dd/mm/yyyy"/> 
          </div> 
         </td> 
        </tr> 
        <tr> 
         <td>Enactment Date:</td> 
         <td greyed-dates> 
          between 
          <div class="start inner-addon right-addon"> 
           <i class="glyphicon glyphicon-calendar"></i> 
           <input type="text" ng-model="date" 
             date-picker-search placeholder="dd/mm/yyyy"/> 

          </div> 
          <span>and</span> 
          <div class="end inner-addon right-addon"> 
           <i class="glyphicon glyphicon-calendar"></i> 
           <input type="text" ng-model="date" 
             date-picker-search placeholder="dd/mm/yyyy"/> 
          </div> 
         </td> 
        </tr> 

All models update by clicking or typing

Я понял изолирования областей в директиве позволит решить эту проблему. Это делается в определенной степени, когда вы просто нажимаете на календарь, чтобы вводить даты, но когда вы пытаетесь ввести даты вручную, снова обновляются все входы, которые ссылаются на директиву.

Models update by clicking only

Единственный способ, которым я был в состоянии своего рода решить эту проблему путем изменения нг-моделей по каждому из элементов, давая им случайную родительскую ссылку (a.data, b.data, с .data, d.data). Хотя это позволяет вносить изменения в каждый сборщик дат в изоляции, это, безусловно, очень плохое решение. Если кто-нибудь знает, что может быть здесь, я бы очень признателен за любую помощь. Это как-то связано с изолированием областей, верно?

Answer 1

По моему мнению, ваше второе решение - единственный способ.

Даже если вы достигли изолирования области применения. Использование переменной $ scope.date как единственной переменной приведет к несоответствию . (Что делать, если вы хотите использовать $ scope.date в каком-то контроллере, как AJS будет знать, какое значение для выбора даты вы говорите).

AJS, изменяющее значение, все, кто выбирает дату, является ожидаемым поведением .

Использование переменной переменной - это то, что я бы сделал. т.е. a.date, b.date ..

---

Вы можете использовать его как этот

link: function(scope, element, attrs, ngModelCtrl){ 
      $(function(){ 
       element.datepicker({ 
        dateFormat: 'd/m/yy', 
        onSelect: function(date){ 
         scope.$apply(function() { 
         ngModelCtrl.$setViewValue(date); 
        }); 
        } 
       }) 
      });   
     } 

---

И В HTML

<input type="text" ng-model="a.date" date-picker-search placeholder="dd/mm/yyyy"/> 

<input type="text" ng-model="b.date" date-picker-search placeholder="dd/mm/yyyy"/> 

и так далее.

---

Вот ссылка codepen. Надеюсь, поможет.