jQuery プラグインを使用するための基本的な手順は、通常、そのディレクティブを作成することです。コールバック内でlink
プラグインを初期化します。ここでは、jQuery または jQ-lite オブジェクトとしての要素、angular スコープ、およびプラグイン コールバックにアクセスできます。$.apply()
サード パーティ コード内でスコープを変更する場合の u に関する重要なコメントを参照してください。
サンプル HTML:
<input my-picker type="text"/>
基本的なスクリプトの概要:
app.directive('myPicker', function ($timeout) {
return {
link: function (scope, elem, attrs) {
$timeout(function () {
/* elem is a jQuery or jQ-lite object representing the element*/
elem.daterangepicker({
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
/* not overly familiar with this plugin but this callback
should allow you to set angular scopes */
function (start, end) {
/* important to do any scope changes within `$.apply()` so angular
becomes aware of changes from third party code*/
scope.$apply(function(){
/* do what you need here with angular scope
have access to plugin data as well as angular scope*/
})
});
}, 1)
}
}
})
他の属性をマークアップに追加し、その属性を使用してさまざまなプラグイン オプションも設定することで、このディレクティブを拡張できます。