Как я могу наблюдать за изменениями в новой строке поиска Angular-ui (бывший ui-select2)?

Question

Я заметил, что 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, чтобы получить список предлагаемых значений, которые должны быть заполнены. Затем будет выбрано одно значение, и поиск должен повторяться по мере необходимости.

Сначала я попробовал $watchв ng-model который в этом случае multipleDemo.colors (используя этот пример из демоверсий). Вызов API никогда не происходил, и тогда я понял, почему. Фактическая модель не изменяется вообще, потому что она изменяется только после того, как сделан выбор (мой блок выбора пуст, поэтому ничего нельзя выбрать).

Мой вывод заключается в том, что я должен (быть в состоянии) $watch что было добавлено в качестве фильтра, а именно filter: $select.search,

Кто-нибудь знает, как я должен использовать это в моем контроллере?

Это:

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

не работает

РЕДАКТИРОВАТЬ: Для чьей-либо справки, см. Это краткое обсуждение: можно ли добавить поддержку пользовательских функций запроса, таких как select2?

РЕДАКТИРОВАТЬ 2:

Я решил это с помощью $emit из директивы, так что значение теперь доступно в моем контроллере. Но теперь я хотел бы знать, как я могу переопределить эту часть директивы, чтобы сама директива оставалась нетронутой, чтобы она не ломалась в будущих обновлениях?

Answer 1

Я решил это, создав событие в нужном месте в директиве, а затем $emitting это - в конце концов я могу слушать событие в моем контроллере и использовать значение.

Недостатком этого является то, что я поместил это непосредственно в стороннюю директиву, чтобы оно не могло быть безопасно обновлено. Мне нужно найти способ переопределить директиву. Если у вас есть идеи, пожалуйста, дайте мне знать.

Answer 2

Использовать refresh атрибут на <ui-select-choices> элемент для вызова функции в вашей области с $select.search в качестве параметра:

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

Тогда используйте функцию (refreshColors() в этом фрагменте), чтобы обновить multipleDemo.availableColors соответственно.

Вы также можете использовать refresh-delay атрибут для указания количества миллисекунд, от которых требуется отменить функцию, чтобы она не вызывалась слишком много раз подряд.

Я также положил availableColors на multipleDemo как вы сделали для multipleDemo.colors, как рекомендуется.

Ссылка: директива ui-select вики в разделе Примеры: Async.

Answer 3

Кажется, есть on-select атрибут, см. пример Github:

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

Answer 4

Используйте ngInit, чтобы получить значение,

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

Вы также можете посмотреть "MySelect" вместо

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

Answer 5

Потерпи меня, это мой первый ответ на ТАК.

Таким образом, текущий топ-ответ не работает для меня. Просто хочу предоставить другой вариант. Свойство refresh в ui-select-choices не вызывает именованную функцию в моей области видимости.

Я проследил информацию в их документах для доступа к пользовательскому интерфейсу, выбранному для пользовательских функций. Создайте пользовательскую директиву, в которой вы смотрите $select.search лайк

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

а затем включить директиву на вашем <ui-select my-ui-select> тег.