Utilizzo della stessa direttiva su più elementi

Question

Sto cercando di seguire l'esempio da this stackoverflow discussion on date formatting, funziona molto bene per una pagina ha solo un campo di data unico. Tuttavia, se nella pagina sono presenti più campi di data, sembra che solo il il primo campo data/il modello ng venga impostato, anche altri campi data siano selezionati.

Di seguito si riporta il codice del template HTML:

<div class="input-append" my-Datepickerloaded> 
     <input type="text" ng-model="user.StartDate" my-Datepickerformater></input> 
     <span class="add-on"> 
      <i data-time-icon="icon-time" data-date-icon="icon-calendar"> 
      </i> 
     </span> 
    </div> 


    <div class="input-append" my-Datepickerloaded> 
     <input type="text" ng-model="user.EndDate" my-Datepickerformater></input> 
     <span class="add-on"> 
      <i data-time-icon="icon-time" data-date-icon="icon-calendar"> 
      </i> 
     </span> 
    </div> 

E qui è il codice di direttiva (myDatePickerformater):.

return { 
      require: '^ngModel', 
      restrict: 'A', 
      link: function (scope, elm, attrs, ctrl) { 
       var moment = $window.moment, 
        dateFormat = 'MM/DD/YYYY'; 

       attrs.$observe('myDatepickerformater', function (newValue) { 
        ctrl.$modelValue = new Date(ctrl.$setViewValue); 
       }); 

       ctrl.$formatters.unshift(function (modelValue) { 
        scope = scope; 
        if (!dateFormat || !modelValue) return ''; 
        var retVal = moment(modelValue).format(dateFormat); 
        return retVal; 
       }); 

       ctrl.$parsers.unshift(function (viewValue) { 
        scope = scope; 
        var date = moment(viewValue, dateFormat); 
        return (date && date.isValid() && date.year() > 1950) ? date.toDate() : ""; 
       }); 
      } 
     }; 

ho cercato di fare un $ portata $ guardare sul i modelli a cui si legano, sembra che anche se sto modificando il campo di input user.EndDate, è sempre user.StartDate ottiene la modifica e user.EndDate rimangono inalterati, anche se il campo "input" mostra entrambi i campi correttamente.

Come faccio ad essere sicuro che entrambi i campi otterranno il loro modello di bind aggiornato correttamente?

Grazie per l'aiuto.

Answer 1

È necessario fornire alla direttiva un isolated scope.

Al momento, più istanze della direttiva condividono lo stesso ambito, pertanto l'aggiornamento del modello non funziona come previsto.

Date un'occhiata a docs.angularjs.org/guide/directive

require: '^ngModel', 
restrict: 'A', 
scope: { 
    ... 
}, 
link: function (scope, elm, attrs, ctrl) { 
    ....