17

jQuery UI の日付ピッカー用に角度ディレクティブを作成しました。問題は、日付が選択されたときにディレクティブが入力の ng-model を更新しないことです。理由はありますか？

http://jsbin.com/ufoqan/1/edit

4

3 に答える 3

32

ngModelAngularJS は、ディレクティブ内で使用できる対話用の特別なコントローラーを実際に提供します。require: 'ngModel'ディレクティブ定義に追加するだけです。

これにより、link関数に 4 番目のパラメーターが与えられます。これは、で要求したコントローラーです。requireこの場合は、のインスタンスですngModelController。$setViewValueモデルの値を設定するために使用できるメソッドがあります。

app.directive('datepicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $(el).datepicker({
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});

素晴らしい点ngModelControllerは、検証とフォーマット (特定の input の場合)、およびコールバックtypeなどとの統合を自動的に処理することです。この例ngChangeをチェックしてください：http://jsbin.com/ufoqan/6/edit

于 2013-05-24T04:23:48.110 に答える
0

@Michelle Tilley と @Jonah は、ディレクティブを ngModel にリンクすることについては正しいのですが、jQuery の代わりに純粋な Angular である datePicker を使用しなかったのはなぜですか?
さて、私はADMdtpモジュールを表しています。これは、多くの優れたオプションを備えた純粋な AngularJs dateTimePicker です。

  • ngModel と完全に同期されているため、dateTimePicker を破棄または更新する必要はありません。
  • アドバンスレンジピッカー; 一緒に関連付ける必要があるだけ多くの dateTimePicker を作成し、各 dateTimePicker を破棄または手動で更新する必要はありません。
  • パターンを無効にする; すべての週末のように、週または月の任意の日を簡単に無効にすることができます。
  • 日替わりで移行。（呪いのオプションで無効にすることができます）
  • UNIX形式の日付、日付形式、年、月、日、時、分などの完全な日付の詳細を個別に取得し、完全なデータ属性で取得します。
  • ...

<adm-dtp ng-model="date" full-data="date_full"></adm-dtp>

于 2016-01-05T00:33:51.700 に答える