DatePicker Bootstrap con interfaccia utente angolare: supporto ng-readonly

Question

L'interfaccia utente di avvio con interfaccia utente non supporta l'attributo ng-readonly. Se l'espressione ng-readonly è vera, il campo di immissione del testo è in grigio e non può essere modificato, ma il calendario di datepicker si apre, consentendo la modifica del campo modulo.

Finora ho provato 3 approcci (vedi http://plnkr.co/edit/KHrbbI6W1pWG5ewSsE9r?p=preview), entrambi i quali sono piuttosto hacker e brutto:

• disattivazione di tutte le date in datepicker se deve essere di sola lettura.

  <input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" date-disabled="disabled(date, mode)" /> 
  

  in file html e

  $scope.$watch('ro', function(ro) { 
      $scope.dt = new Date($scope.dt); // force datepicker div refresh 
  }); 
  $scope.disabled = function(date, mode) { 
      return $scope.ro; 
  }; 
  

  controller.

• Non consentire a pop di datepicker di apparire.

  <input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" is-open="opened" /> 
  

  in file html e

  $scope.$watch('opened', function(v1, v2, v3) { 
      if ($scope.ro && v1) { 
      $timeout(function() { 
       $scope.opened = false; 
      }); 
      } 
  }); 
  

  controller. Datepicker lampeggiante sembra terribile.

• Sostituzione dell'input di testo di DatePicker con un altro campo di input di sola lettura senza datepicker allegato.

  <datepicker-ro-fix datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" /> 
  

  in file html e

  m.directive('datepickerRoFix', function() { 
      return { 
      restrict: 'E', 
      require: 'ngModel', 
      scope: { 
       ngModel: '=', 
       ngReadonly: '=', 
      }, 
      template: '<span>' 
       + '<input ng-hide="ngReadonly" type="text" datepicker-popup="dd.MM.yyyy" ng-model="ngModel" />' 
       + '<input ng-show="ngReadonly" type="text" readonly="true" value="{{ ngModel | date:\'dd.MM.yyyy\'}}" />' 
       + '</span>', 
      }; 
  }); 
  

  nel file di js. Questa sembra essere la soluzione migliore finora, ma il lato negativo è che ora ci sono due elementi di input invece di uno, entrambi hanno alcune proprietà hardcoded.

Primo e secondo approcci mi richiedono di aggiungere un po 'di codice in forma di controllo per ogni campo di input data, Terzo è molto più difficile da personalizzare.

Sono nuovo ad angolare e dovrebbe mancare qualcosa. C'è un modo migliore per rendere i campi di input con datepicker veramente di sola lettura?

Answer 1

Il tuo terzo approccio è abbastanza bello, imho.

Dato che il DatePicker in sé, ovviamente, non supporta proprietà di sola lettura, non vedo altro modo come farlo in sola lettura (e addirittura creato una direttiva per esso)

tuo secondo approccio a volte si traduce in sfarfallio minore quando si fa clic sull'input (sono solo io?)

Per quanto riguarda la personalizzazione, è possibile elaborare il motivo per cui è difficile da fare? Dovresti collegare tutti i possibili attributi della direttiva originale alla tua direttiva, immagino?

Answer 2

Usa ng-disabled="true"

<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="date" min="minDate" max="maxDate" ng-disabled="true" readonly="true"/> 

Answer 3

ng-disabled="true"

ha lavorato per me. Angularjs: 1.2.9 e ui-bootstarp: 0.8.0

Purtroppo non ho la reputazione abbastanza per commentare la risposta originale