0

私はこの洗練された jQuery datpickerを少しいじっており、Angular アプリ内で使用できるディレクティブとしてまとめたいと考えていました。ディレクティブのコードは、現時点では非常に単純です。

directive('datePicker', function() {
    return {
        restrict: 'E',
        template: '<input type="text" class="topcoat-text-input--large full" placeholder="Select Date">',
        link: function (scope, element, attrs) {
            element.pickadate();
        }
    }

ご覧のとおり、必要なpickadate()jQuery 呼び出しで要素パラメーターをターゲットにしているだけです。入力をクリックすると、datepicker インターフェイスが提供され、問題なく操作できるため、入力は適切にターゲットにされています。ただし、日付を選択すると、入力要素に情報が入力されません。コントロールから選択された日付が入力の値を設定できるようにする明らかな何かが欠けていますか?

私は少しデバッグを行いました.link関数では、要素パラメータが何らかの方法で実際の入力をラップしているようです(<input>タグを保持するchildNodes配列プロパティがあるようです)。これが、ピッカーのポップアップを取得しているのに、選択した値が入力の値として設定されていない理由でしょうか?

4

2 に答える 2

1

replace: trueディレクティブ定義に追加する必要があると思います-Angularは<date-picker>、入力ではなくディレクティブ要素をターゲットにしています。

代わりに、これを試すこともできます：element.children().first().pickadate();

于 2013-11-06T23:29:21.253 に答える
1

elementマークアップの元の要素です。デフォルトでは置き換えられず、テンプレートが innerHtml に使用されます。

replace:trueディレクティブまたはでオプションを使用できますelement.find('input').pickadate()

これらのいずれかで、日付が表示されるという視覚的な問題が解決されるはずです。ただし、jQuery プラグインなどの外部コードから値を使用ng-modelおよび変更する場合は、プラグインselect(または pluginAPI で呼び出されるもの) コールバックを使用して をトリガーする必要がありますscope.$apply()。この infomrs angular は、外部コードから angular への変更が行われ、内部を更新するために行われました。

于 2013-11-06T23:30:49.960 に答える