6

まず、クライアント側プログラミングへの移行に取り組んでいることをお伝えしておきます。私はjsが初めてです。私の以前の経験は、主に C といくつかのアセンブリです。私はまた、まだ4.0だった数年前に非常に単純なphpを少しやりました。要するに、javascript は初めてですが、少し頭を悩ませています。

かなりの検索と潜伏を行いましたが、問題を修正できませんでした.

私は AngularJS の基本のいくつかを理解していますが、それは非常に優れていますが、ディレクティブがどのように機能するか、およびカスタム コントロールからデータにアクセスする方法について頭を悩ませています。

簡単に言えば、ブートストラップ用のカスタムコントロールをangularjsで機能させて、フォームで適切に使用できるようにしようとしています。

コントロールは次のとおりです: http://tarruda.github.com/bootstrap-datetimepicker/

機能させたいコントロールが他にもいくつかありますが、これを実行できれば、おそらく他のコントロールを十分に簡単に取得できると思います。

この時点で私が持っている基本的なフレームワークへのリンクは次のとおりです: http://jsfiddle.net/uwC9k/6/

まず、テンプレートが機能するようになったら、コントロールを初期化する方法について頭を悩ませようとしています (これは、この時点でほとんど行うと思います)。

link: function(scope, element, attr) {
            attr.$observe('dpid', function(value) {
                if(value) {
              $('#' + scope.dpid).datetimepicker({
                  language: 'en',
                  pick12HourFormat: true
            });
}

それをリンクディレクティブに入れると、何もしません。エラーも表示されません。scope.dpid は確かにコントロールの ID を示しているので、うまくいくと思いました。しかし、悲しいかな、JavaScript についての私の貧弱な理解は、私が範囲外であるか、要素にアクセスできないようなナンセンスであることを教えてくれます。

いったんそれを始めると、フォームでこのデータにアクセスできるようにする方法も正確にはわかりません。

どんな助けでも大歓迎です。

更新 基本的なビットが機能するようになったので、新しいコントロールからコントローラーにデータを取得する方法を知る必要があります。これは、更新された新しい jsfiddle へのリンクです。 http://jsfiddle.net/tmZDY/1/

更新 2 このデータにアクセスできるようにする方法についてのアイデアはあると思いますが、javascript に関する知識が不足しているため、再び乾燥してしまいました。

オブジェクトを作成するときは、このようにします。

var elDatepicker = element.datetimepicker({
language : 'en',
pick12HourFormat : true,
});

ただし、このオブジェクトを使用しようとすると、正しいオブジェクトが取得されないように見えるか、基本的な知識が不足しているだけです。いずれにせよ、これは確かに私を愚かに感じさせます。

console.log(elDatepicker.getDate());

これは失敗します。getDate は確かにメソッドです。少なくとも、プラグインのコードにあるようです。

4

3 に答える 3

3

スコープを分離する代わりにfind()、最初divのテンプレートを適用してから適用することができますdatetimepicker()。idしたがって、HTMLにを含める必要はありません。

<datepicker model="mydate"></datepicker>
mydate = {{mydate}}

私も提案しreplace: trueます：

.directive('datepicker', function ($parse) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class=\"well\"><div class=\"input-append\">'
         + '<input data-format=\"MM/dd/yyyy HH:mm:ss PP\" type=\"text\"></input>'
         + '<span class=\"add-on\"><i data-time-icon=\"icon-time\" data-date-icon=\"icon-calendar\"></i></span>'
         + '</div></div>',
        link: function (scope, element, attr) {
            var picker = element.find('div').datetimepicker({
                language: 'en',
                pick12HourFormat: true
            });
            var model = $parse(attrs.model);
            picker.on('changeDate', function(e) {
               console.log(e.date.toString());
               console.log(e.localDate.toString());
               model.assign(scope, e.date.toString());
               scope.$apply();
           });
        }
    };
})

フィドル

$parseは少し注意が必要です。assign()私が示しているのは、その主なユースケースです。属性を解析し、スコーププロパティを変更できるメソッドを持つ関数を取得します。

于 2013-03-21T01:54:51.590 に答える
0

このフィドルに示されているように、これを行う方法の1つがこれである可能性があります。http://jsfiddle.net/uwC9k/10/

要素をテンプレート文字列に置き換える必要があるためdatepicker、これはコンパイル関数を使用するための良いユースケースになります。したがって、コンパイル関数内でdatepicker要素をテンプレート文字列に置き換えます。

コンパイルが完了したら、リンク関数に移動します。これは、コンパイル関数内から返される関数に他なりません。リンク関数が行うことは、この<div class=\"input-append\">要素を日付ピッカー機能で初期化することです。

element.datetimepicker({
                      language: 'en',
                      pick12HourFormat: true
                });

jqueryを含めているため、リンク関数の要素属性はjqueryワープ要素です。したがって、すぐにdatetimepickerメソッドを呼び出すことができます。

于 2013-03-21T02:14:05.490 に答える
0

datetimepickerdatetimepickerに変換する必要があるdivにのようなクラスを追加し、そのクラスを使用して要素を検索できます。

.directive('datepicker', function() {
    return {
        restrict: 'E',
        template: '<div class=\"well\"><div id={{dpid}} class=\"input-append datetimepicker\"><input data-format=\"MM/dd/yyyy HH:mm:ss PP\" type=\"text\"></input>    <span class=\"add-on\"><i data-time-icon=\"icon-time\" data-date-icon=\"icon-calendar\">      </i>    </span>  </div></div>',
        scope: { dpid: '@'},
        link: function(scope, element, attr) {
            attr.$observe('dpid', function(value) {
                if(value) {
              $(element).find('.datetimepicker').datetimepicker({
                  language: 'en',
                  pick12HourFormat: true
            });
                }
            });
        }
    };
})

デモ：フィドル

于 2013-03-21T03:04:10.647 に答える