[解決済み] ng-modelを使用したangularのdatepickerディレクティブの作成方法

質問

jQuery UI datepickerのためにangularディレクティブを作成しました。問題は、日付が選択されたときに、ディレクティブが入力のng-modelを更新しないことです。なぜでしょうか？

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

解決方法は？

AngularJSは、実際に ngModel ディレクティブの中で使用することができます。 require: 'ngModel' をディレクティブの定義に追加してください。

これにより、4つ目のパラメータとして link 関数で要求されたコントローラです。 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 は、バリデーションと書式設定を自動的に行います (特定の入力の場合 type のようなものとの統合が可能です。 ngChange コールバック; チェックアウト この例 : http://jsbin.com/ufoqan/6/edit