angularjs-directive - angularjs ブートストラップの datepicker ディレクティブの問題

Question

私はAngularが初めてで、datepickerディレクティブを機能させるのに問題がありました。http://jsfiddle.net/jGU95/9/の jsFiddleは、私が克服できなかったいくつかの問題を示しています。

フォームは非常にシンプルです。

<div ng-app="myApp" ng-controller="Ctrl">
    <br>
    Date 1
    <input type="text" datepicker1={{pickeropts}} ng-model="date1" /> {{date1 | date:MM/dd/yyyy}}
    <br>
    Date 2
    <input type="text" datepicker2={{pickeropts}} ng-model="date2" /> {{date2 | date:MM/dd/yyyy}}
    <br>
    Date 3
    <input type="text" datepicker1 data-date-format="{{format}}" ng-model="date3" /> {{date3 | date:MM/dd/yyyy}}        
</div>

datepicker1 ディレクティブの日付の元のレンダリングは間違った形式であり、実際の日付ピッカーは日付に関連付けられていません。つまり、Date 1 テキスト フィールドが選択されている場合、datepicker は 1975 年の日付ではなく今日の日付で起動されます。日付ピッカーから日付が選択されると、出力日付文字列を適切な形式で表示するなど、コントロールは期待どおりに動作します。

datepicker1 ディレクティブは次のとおりです。

.directive('datepicker1', function(){
    return {
        require: '?ngModel',
        link: function($scope, element, attrs, controller) {
            var originalRender;
            var updateModel = function(ev) {
                return $scope.$apply(function() {
                    return controller.$setViewValue(ev.date);
                });
            };
            if (controller != null) {
                originalRender = controller.$render;
                controller.$render = function() {
                    originalRender();
                    return element.datepicker.ddate = controller.$viewValue;
                };
            }
            return attrs.$observe('datepicker1', function(value) {
                var options;
                options = {};
                if (angular.isObject(value)) {
                    options = value;
                }
                if (typeof(value) === "string" && value.length > 0) {
                    options = angular.fromJson(value);
                }
                return element.datepicker(options).on('changeDate', updateModel);
            });
        }
    };
})

datepicker2 には、日付の元のレンダリングにも問題があり、指定された形式オプションも無視されます。これは、attrs.$observe 関数の前に発生する controller.$render 関数の datepicker 要素のインスタンス化が原因であると思われます。

これがdatepicker2ディレクティブです

.directive('datepicker2', function(){
    return {
        require: '?ngModel',
        link: function($scope, element, attrs, controller) {
            var updateModel = function(ev) {
                return $scope.$apply(function() {
                    return controller.$setViewValue(ev.date);
                });
            };
            if (controller !== null) {
                controller.$render = function() {
                    element.datepicker().data().datepicker.date = controller.$viewValue;
                    element.datepicker('setValue');
                    element.datepicker('update');
                    return controller.$viewValue;
                };
            }
            return attrs.$observe('datepicker2', function(value) {
                var options;
                options = {};
                if (angular.isObject(value)) {
                    options = value;
                }
                if (typeof(value) === "string" && value.length > 0) {
                    options = angular.fromJson(value);
                }
                return element.datepicker(options).on('changeDate', updateModel);
            });
        }
    };
});

最後に、日付 3 の日付ピッカーは機能しません。これは、日付ピッカーに送信される前に $scope.format 値が文字列に適切に補間されていないためです。

これらのいずれかを修正する方法を理解するのを手伝ってください...

スティーブ