angularjsangularjs-directiveangularjs-scopeangular-uiui-select2

How do I $watch the Angular-ui's new ui-select (former ui-select2) search string changes?


I noticed that the Angular-UI have discontinued their UI-Select2 directive in favor of the new UI-Select (with multiple themes - select2, bootstrap, selectize).

It looks like this:

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

Initially my selectbox is supposed to be empty but ready to take typed characters, that is a string of at least 4 characters and then make an API call to retrieve a list of suggested values which are to populate the box. One value will then be chosen, and searching should be repeated as needed.

First I tried $watching the ng-model which in this case is multipleDemo.colors (using this example from the demos). The API call never occurred and then I realized why. The actual model is not changed at all because it only changes when a selection is made (my selectbox is empty so nothing can be selected).

My conclusion is that I should (be able to) $watch what's been added as filter, namely filter: $select.search.

Does anyone know how am I supposed to use that one in my controller?

This:

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

doesn't work.

EDIT: For anyone's reference, see this short discussion: Is it possible to add support for custom query function like the select2?

EDIT 2:

I solved this by using $emit from within the directive so the value is available in my controller now. But now I'd like to know how can I override this part of the directive so the directive itself can be left intact so it doesn't break in future updates?


Solution

  • I solved it by creating an event in the right spot within the directive and then $emitting it - eventually I am able to listen to the event in my controller and use the value.

    The downside to this is that I've put this directly in the 3rd-party's directive so it can't be safely updated. I need to find a way to override the directive. If you have any ideas, please let me know.