Angular-uiの新しいui-select(以前のui-select2)検索文字列の変更を$ watchするにはどうすればよいですか?

開発者10

Angular-UIがUI-Select2ディレクティブを廃止し、新しいUI-Select(複数のテーマ(select2、bootstrap、selectize)を使用)を採用していることに気付きました。

次のようになります。

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
    </ui-select-choices>
</ui-select>

<p>Selected: {{multipleDemo.colors}}</p>

最初、私の選択ボックスは空であるはずですが、入力された文字、つまり少なくとも4文字の文字列を受け取る準備ができており、API呼び出しを行って、ボックスに入力する推奨値のリストを取得します。次に、1つの値が選択され、必要に応じて検索を繰り返す必要があります。

最初に、この場合はどれで$watchあるng-modelを試してみましたmultipleDemo.colors(デモのこの例を使用)。API呼び出しは発生しなかったので、その理由に気づきました。実際のモデルは、選択が行われたときにのみ変更されるため、まったく変更されません(私の選択ボックスは空なので、何も選択できません)。

私の結論は、$watchフィルターとして追加されたもの、つまりfilter: $select.search

誰かが私のコントローラーでそれをどのように使用することになっているのか知っていますか?

この:

$scope.$watch('$select.search', function(newVal){
    alert(newVal);
});

動作しません。

編集:誰かの参考のために、この短い議論を参照してください:select2のようなカスタムクエリ関数のサポートを追加することは可能ですか?

編集2:

$emitディレクティブ内からを使用してこれを解決したので、値がコントローラーで使用できるようになりました。しかし、ディレクティブ自体をそのままにして、将来の更新で壊れないように、ディレクティブのこの部分をオーバーライドする方法を知りたいのですが。

開発者10

ディレクティブ内の適切な場所にイベントを作成して解決しました。$emitting最終的には、コントローラーでイベントをリッスンし、値を使用できるようになりました。

これの欠点は、これをサードパーティのディレクティブに直接入れたため、安全に更新できないことです。ディレクティブをオーバーライドする方法を見つける必要があります。何かアイデアがあれば教えてください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ