Angular UI Bootstrap Datepicker: support ng-readonly

Angulaire UI Bootstrap datepicker n'a pas les honneurs ng-attribut lecture seule.
Si ng-readonly expression est true, le champ de saisie de texte est grisé et ne peut pas être modifié, mais le datepicker calendrier pop-up s'ouvre, permettant de modifier les champs du formulaire.

Jusqu'à présent j'ai essayé les 3 méthodes (voir http://plnkr.co/edit/KHrbbI6W1pWG5ewSsE9r?p=preview), qui sont tous deux plus à du bidouillage et vilaine:

  • La désactivation de toutes les dates de datepicker si elle doit être en lecture seule.
    <input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" date-disabled="disabled(date, mode)" />

    dans le fichier html et

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

    dans le contrôleur.

  • Ne permettant pas datepicker div popup pop up.
    <input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" is-open="opened" />

    dans le fichier html et

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

    dans le contrôleur. Clignotant datepicker l'air terrible.

  • Remplacement datepicker de la saisie de texte avec un autre readonly champ de saisie sans datepicker attaché.
    <datepicker-ro-fix datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" />

    dans le fichier html et

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

    dans le fichier js. Cela semble être la meilleure solution jusqu'à présent, mais l'inconvénient est que maintenant il y a deux éléments d'entrée au lieu d'un seul, les deux ont quelques codé en dur propriétés.

Première et de la deuxième approches nécessitent moi d'ajouter un tas de code dans le formulaire de contrôleur pour chaque date, champ de saisie, la Troisième est beaucoup plus difficile à personnaliser.

Je suis nouveau sur angulaire et devrait être en manque de quelque chose.
Est-il une meilleure façon de créer des champs de saisie avec datepicker vraiment en lecture seule?

source d'informationauteur Vasily Redkin