Come faccio a guardare la nuova stringa di ricerca di ui-select (ex ui-select2) di Angular-ui?

Question

Ho notato che l'interfaccia utente di Angular ha interrotto la direttiva UI-Select2 a favore della nuova UI-Select (con più temi - select2, bootstrap, selectize).

Ecco come si presenta:

<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> 

Inizialmente la mia selectbox si suppone che sia vuoto, ma pronti a prendere i caratteri digitati, vale a dire una serie di almeno 4 caratteri e quindi effettuare una chiamata API per recuperare un elenco dei valori suggeriti che devono compilare la scatola. Sarà quindi scelto un valore e la ricerca dovrebbe essere ripetuta secondo necessità.

Prima ho provato $watch il ng-model che in questo caso è multipleDemo.colors (utilizzando questo esempio dalle demo). La chiamata API non si è mai verificata e quindi ho capito perché. Il modello attuale non viene affatto modificato perché cambia solo quando viene effettuata una selezione (la mia selectbox è vuota, quindi nulla può essere selezionato).

La mia conclusione è che dovrei (essere in grado di) $watch cosa è stato aggiunto come filtro, ovvero filter: $select.search.

Qualcuno sa come dovrei usare quello nel mio controller?

questo:

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

non funziona.

EDIT: Per riferimento di nessuno, si veda questo breve discussione: Is it possible to add support for custom query function like the select2?

EDIT 2:

ho risolto questo utilizzando $emit dall'interno della direttiva in modo che il valore è disponibile nel mio controller ora. Ma ora mi piacerebbe sapere come posso sovrascrivere questa parte della direttiva in modo che la direttiva stessa possa essere lasciata intatta, in modo che non si rompa nei futuri aggiornamenti?

Answer 1

L'ho risolto creando un evento nel punto giusto all'interno della direttiva e quindi $emitting esso - alla fine sono in grado di ascoltare l'evento nel mio controller e utilizzare il valore.

Il lato negativo di questo è che l'ho inserito direttamente nella direttiva di terze parti in modo che non possa essere aggiornato in modo sicuro. Devo trovare un modo per sovrascrivere la direttiva. Se avete qualche idea, per favore fatemelo sapere.

Answer 2

Sembra che ci sia un attributo on-select, vedi Github example:

<ui-select ng-model="person.selected" on-select="someFunction($item, $model)" [...]> 
    [...] 
</ui-select> 

Answer 3

Utilizzare l'attributo refresh sull'elemento <ui-select-choices> per chiamare una funzione sul vostro campo di applicazione con $select.search come parametro:

<ui-select-choices repeat="color in multipleDemo.availableColors | filter:$select.search" 
        refresh="refreshColors($select.search)" 
        refresh-delay="0"> 
    {{color}} 
</ui-select-choices> 

Quindi utilizzare la funzione (refreshColors() in questo snippet) per aggiornare multipleDemo.availableColors di conseguenza.

Si può anche utilizzare l'attributo refresh-delay per specificare quanti millisecondi antirimbalzo la funzione in modo che non viene chiamato troppe volte in rapida successione.

Ho anche inserito availableColors su multipleDemo come hai fatto per multipleDemo.colors, come è recommended.

Riferimento: ui-select directive wiki nella sezione Esempi: Async.

Answer 4

Usa ngInit per ottenere il valore,

<div ui-select ng-init="mySelect = $select"></div> 
<button ng-click="search(mySelect.search)">Search</button> 

È possibile alse orologio 'mySelect' invece

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

Answer 5

Orso con me, questa è la mia prima risposta su SO.

Quindi la risposta attuale non funziona per me. Voglio solo fornire un'altra opzione. La proprietà refresh nelle scelte ui-select non attiva la funzione named nel mio scope.

Ho seguito le informazioni in their docs per accedere alla selezione dell'interfaccia utente per le funzioni personalizzate. Creare una direttiva personalizzato in cui si guarda come $select.search

myModule.directive('myUiSelect', function() { 
 
    return { 
 
    require: 'uiSelect', 
 
    link: function(scope, element, attrs, $select) { 
 
     scope.$watch('$select.search', function (search) { 
 
     if (search) { 
 
      ... 
 
     } 
 
     }); 
 
    } 
 
    }; 
 
});

e quindi includere la direttiva sul tag <ui-select my-ui-select>.