2

ユーザーがさまざまな形式で日付を入力できるようにするディレクティブを作成したいと考えています。基になるモデルが変更された場合 (ユーザーの直接入力によるものか、プログラムによるものか)、日付を正規化された形式で表示したいと考えています。

この「実際の」例は、Google フライトの出発日と帰国日の入力です。

これが私のコードです（まったく機能しません）。

見る

<input type="text" ng-model="params.departDate" 
  date-input display-format="{Weekday} {d} {Month}, {yyyy}">

コントローラ

app.controller('MainCtrl', function($scope) {
  $scope.params = {
      departDate: new Date()
  };
  $scope.isDate = function() {
      return $scope.params.departDate instanceof Date;
  }
});

指令

app.directive("dateInput", function() {
    return {
        require: 'ngModel',
        scope: {
            displayFormat: '@'
        },
        link: function (scope, element, attrs, ngModel) {

            ngModel.$parsers.push(function (viewVal) {
                if (viewVal) {
                    // Using sugar.js for date parsing
                    var parsedValue = Date.create(viewVal);
                    if (parsedValue.isValid()) {
                        ngModel.$setValidity("date", true);
                        return parsedValue;
                    }
                }
                ngModel.$setValidity("date", false);
                return viewVal;
            });

            ngModel.$formatters.unshift(function (modelVal) {
                if (modelVal){
                    // Using sugar.js for date formatting
                    var date = Date.create(modelVal);
                    if (date.isValid()) {
                        return date.format(scope.displayFormat || '{Weekday} {d} {Month}, {yyyy}')
                    }
                }
                return modelVal;
            });
        }
    };
})

これは、私が期待するように機能することさえありません。私は何を間違っていますか？

PLUNKR はこちら: http://plnkr.co/edit/583yOD6aRhRD8Y2bA5gU?p=preview

4

2 に答える 2

3

コメントで述べたように、ng-model と isolate スコープはうまく混在しません。「分離スコープでng-model を使用できますか?」を参照してください。.

ディレクティブにスコープを作成せず、attrs を使用して display-format 属性にアクセスすることをお勧めします。

var displayFormat = attrs.displayFormat;
于 2013-08-01T16:18:55.223 に答える
1

また、再利用可能なディレクティブを使用してスコープを分離することも好みます。その場合、ng-model には親スコープへの適切なパスを指定する必要があります: ng-model="$parent.params.departDate"

プランカーの更新: http://plnkr.co/edit/DuR6Om2kyzWD67hYExSh?p=preview

于 2014-01-09T12:49:44.843 に答える