0

次のようなディレクティブを定義しました。

angular.module('MyModule', [])
    .directive('datePicker', function($filter) {
        return {
            require: 'ngModel',
            link: function(scope, elem, attrs, ctrl) {
                ctrl.$formatters.unshift(function(modelValue) {
                    console.log('formatting',modelValue,scope,elem,attrs,ctrl);
                    return $filter('date')(modelValue, 'MM/dd/yyyy');
                });
                ctrl.$parsers.unshift(function(viewValue) {
                    console.log('parsing',viewValue);
                    var date = new Date(viewValue);
                    return isNaN(date) ? '' : date;
                });
            }
        }
    });

ただし、テキストボックスにキーを入力するたびにパーサーが起動するようです-デフォルトのイベントは正確には何keyupですかinput? そして、それを唯一の火に変更するにはどうすればよいonchangeですか？それ以上頻繁に発砲する必要はありません。

さらに、jQuery UI の datepicker を使用して、この入力の内容を実際に操作しています。カレンダーをクリックしても、モデルの更新/パーサーのトリガーを引き起こす適切なイベントがトリガーされないようです。イベントを強制的に発生させることができると思います が、どれを知る必要があります。

使用しようとしていますscope.$apply()が、それは何の役にも立たないようです:

.directive('datepicker', function($filter) {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            $(elem).datepicker({
                onSelect: function(dateText, inst) {
                    console.log(dateText, inst);
                    scope.$apply();
                }
            });
            ctrl.$formatters.unshift(function(modelValue) {
                console.log('formatting',modelValue);
                return $filter('date')(modelValue, attrs.datePicker || 'MM/dd/yyyy');
            });
            ctrl.$parsers.unshift(function(viewValue) {
                console.log('parsing',viewValue);
                return new Date(viewValue);
            });
        }
    }
})

(a) 日付形式またはその他のオプションを選択するために datepicker 属性値を使用したいが、さらに重要なのは、(b) 文字列を実際の日付オブジェクトが必要な場合のモデル...そのため、何らかの形式の解析を実行してに適用する必要がありng-modelます.

4

1 に答える 1

2

ここでは、mo-change-proxyディレクティブを作成しました。これは、ng-modelで動作し、変更時にのみプロキシ変数を更新します。

このデモには、日付入力用の改善されたディレクティブも含まれています。見てください。
デモ： http： //plnkr.co/edit/DBs4jX9alyCZXt3LaLnF？p = Preview

angModule.directive('moChangeProxy', function ($parse) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var proxyExp = attrs.moChangeProxy;
            var modelExp = attrs.ngModel;
            scope.$watch(proxyExp, function (nVal) {
                if (nVal != ctrl.$modelValue)
                    $parse(modelExp).assign(scope, nVal);
            });
            elm.bind('blur', function () {
                var proxyVal = scope.$eval(proxyExp);
                if(ctrl.$modelValue != proxyVal) {
                    scope.$apply(function(){
                        $parse(proxyExp).assign(scope, ctrl.$modelValue);
                    });
                }
            });
        }
    };
});
于 2013-01-25T10:10:46.280 に答える