AngularJS/UI Bootstrapカスタム$バリデータとgetterSetterで消える値

Question

私の目標は、入力マスクも持つUI Bootstrapのdatepickerを作成することです。

datepickerディレクティブは、ユーザーが手動で入力する日付ではなく、ポップアップウィンドウで選択した日付のみを検証するため、テキスト入力の場合はhow to add custom validationを検索しました。

私はこれをすべて持っていますworking in this Plunkです。ここで

は重要なビットです：

<!-- HTML --> 
<span>Errors: {{myForm.myDate.$error}}</span> 
<input 
    name="myDate" 
    type="text" 
    class="form-control" 
    ng-class="{error: myForm.myDate.$invalid && myForm.myDate.$dirty}" 
    datepicker-popup="MM/dd/yyyy" 
    ng-model="dt" 
    is-open="opened" 
    min-date="'09/01/2015'" 
    max-date="'11/11/2015'" 
    ng-required="true" 
    show-weeks="false" 
    show-button-bar="false" /> 


// JavaScript 
.controller('DatepickerDemoCtrl', function ($scope) { 
    $scope.dt = undefined; 

    $scope.open = function($event) { 
    $scope.opened = !$scope.opened; 
    }; 

    $scope.today = new Date(); 
}) 

.config(function($provide) { 
    $provide.decorator('datepickerPopupDirective', function($delegate) { 
    var directive = $delegate[0]; 
    var link = directive.link; 

    directive.compile = function() { 
     return function(scope, iEl, iAttrs, ctrls) { 
     link.apply(this, arguments); 

     // use custom validator to enforce date range on hand-entered text 
     ctrls[0].$validators.inDateRange = function(modelValue, viewValue) { 
      console.log(modelValue, viewValue); 

      // use the ranges provided in the attributes for the validation 
      var enteredDate = new Date(viewValue) 
      , min = new Date(iAttrs.minDate) 
      , max = new Date(iAttrs.maxDate); 

      return ctrls[0].$isEmpty(modelValue) 
       || (min <= enteredDate && enteredDate <= max); 
     }; 

     // apply input mask to the text field 
     iEl.mask('99/99/9999'); 
     }; 
    }; 

    return $delegate; 
    }); 
}); 

は今、私は私がモデルにそれを永続化する前に、値のいくつかの作業を行うことができますので、私の入力にgetterSetterを追加しているシンプルなものを、やってみたいです。

私の要素のng-modelが変更されます。ng-model-optionsを追加してgetterSetterを参照し、実際のgetterSetterメソッドを追加してください。基本的に何もしないでもthis simple Plunk withgetterSetterしかし

<!-- HTML --> 
ng-model="getSetDate" 
ng-model-options="{getterSetter: true}" 

// JavaScript 
$scope.getSetDate = function(val) { 
    if(angular.isDefined(val)) { 
    $scope.dt = val; 
    } else { 
    return val; 
    } 
}; 

は、エラーを紹介します。私がいる場合：無効な日に

1. タイプは、（入力）の有効な日に、それ09/10/2011
2. 正しいと言う、値が消え09/10/2015
3. を言う

私は理解できませんなぜこの単純な紹介getterSetterが私の価値を失う原因になっているのでしょうか。これを別の方法で実装する必要がありますか？

Answer 1

getterSetterオプションを含むng-model-optionsのように見えますが、実際には日付ピッカーではまだサポートされていませんが、実装したいものです。

https://github.com/angular-ui/bootstrap/issues/4837

編集： はまた、私は見ていて、二次モデルを更新plunkを作成しました。私はそれがあなたが正確に探しているものかどうかは分かりませんが、getterSetterで試していたのと同様のことをしているようです。本質的に、あなたの作業例に以下が追加されました。

$scope.dt = undefined; 
    $scope.newdt = undefined; 

    $scope.$watch('dt', function(){ 
    if ($scope.dt) 
     $scope.newdt = $scope.dt; 
    });