AngularJSとディレクティブの初心者の質問 - jQueryコンポーネントをラップする

Question

まず、私はクライアントサイドプログラミングへの移行に取り組んでいます。私は非常にjsに新しいです。私の以前の経験は主にCといくつかのアセンブリです。私はまた、それがまだ4.0だったとき、何年も前に非常に単純なPHPをやった。つまり、要するに、javascriptを初めて使うのですが、私の頭の中に少し入れてください。

私はかなりの検索と潜入を行っていますが、私の問題を修正することができませんでした。

私はAngularJSの基本をいくつか解説していますが、それはとてもいいですが、ディレクティブの仕組みやカスタムコントロールからのデータへのアクセス方法については頭を悩ましています。

私はanglejsのブートストラップ作業用のカスタムコントロールを作成しようとしていますので、フォームで正しく使用できます。ここで

はコントロールです：http://tarruda.github.com/bootstrap-datetimepicker/

私が仕事をしたいが、私はこの1つは、私はおそらく簡単に十分な他の人を得ることができ軌道に乗ることができれば、私は理解いくつかの他のコントロールを持っています。ここで

は、私は、この時点で持っているものの基本的な枠組みへのリンクです： http://jsfiddle.net/uwC9k/6/まず第一に、私は私が（どの作業テンプレートを持っていたら、コントロールを初期化する方法のまわりで私の頭をラップしようとしています

、I私は思っています）。

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

私はリンクディレクティブに入れても何もしません。私は何の誤りも見ない。私はそれが動作すると思ったので、scope.dpidは本当にコントロールのIDを示しています。しかし、悲しいかな、私のjavascriptの私のfebbleの理解は、私が要素にアクセスできないスコープやそのようなナンセンスの外にいることを私に伝えます。

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

ご協力いただきまして誠にありがとうございます。

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

アップデート2 私は、このデータにアクセスできるようにする方法についてのアイデアを持っていると思いますが、ジャバスクリプトの私の不足知識は再びドライ私を残しています。

私がオブジェクトを作成するとき、私はそうする。

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

ただし、このオブジェクトを使用しようとすると、正しいオブジェクトが得られないように見えるか、基本的な知識が欠落しています。いずれにせよ、これは私が愚かな気分になることを確実にしている。

console.log(elDatepicker.getDate()); 

これは、getDateが実際にはメソッドであり、少なくともプラグインのコードにあるように見えます。

Answer 1

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

<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(); 
      }); 
     } 
    }; 
}) 

Fiddle

$parseは少しトリッキーです。私が示しているのは、その主な使用例です：属性を解析し、スコーププロパティを変更できるようにassign()メソッドを持つ関数を返します。

Answer 2

このフィドルに示されているように、これを行う方法の1つは、これかもしれません。 http://jsfiddle.net/uwC9k/10/

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

コンパイルが完了したら、リンク関数に行きます。リンク関数は、コンパイル関数内から返された関数だけです。どのような連携機能が行いますが、あなたはjqueryのを含めているので

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

使用して、日付ピッカー機能を備えたこの<div class=\"input-append\">要素を初期化することで、リンク機能で要素の属性は、jqueryのwarpped要素です。すぐにdatetimepickerメソッドを呼び出すことができます。

Answer 3

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

.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 
      }); 
       } 
      }); 
     } 
    }; 
}) 

デモ：Fiddle