我如何观看Angular-ui的新ui-select（以前的ui-select2）搜索字符串更改？

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

我注意到Angular-UI已经停止了他们的UI-Select2指令，转而支持新的UI-Select（有多个主题 - 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.

最初我的选择框应该是空的但是准备好接受类型字符，即至少4个字符的字符串，然后进行API调用以检索要填充框的建议值列表。然后将选择一个值，并且应该根据需要重复搜索。

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

首先，我尝试观看ng-model，在这种情况下是multipleDemo.colors（使用演示中的这个示例）。 API调用从未发生，然后我意识到了原因。实际模型根本不会更改，因为它只会在进行选择时更改（我的选择框为空，因此无法选择任何内容）。

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

我的结论是，我应该（能够）$观察已添加为过滤器的内容，即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?

编辑：对于任何人的参考，请参阅这个简短的讨论：是否可以添加对自定义查询功能的支持，如select2？

EDIT 2:

编辑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?

我通过在指令中使用$ emit来解决这个问题，因此现在我的控制器中可以使用该值。但现在我想知道如何覆盖指令的这一部分，以便指令本身可以保持原样，以便在将来的更新中不会中断？

5 个解决方案

#1

Use the refresh attribute on the <ui-select-choices> element to call a function on your scope with $select.search as the parameter:

使用元素上的refresh属性以$ select.search作为参数调用作用域上的函数：

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

Then use the function (refreshColors() in this snippet) to update multipleDemo.availableColors accordingly.

然后使用函数（此片段中的refreshColors（））相应地更新multipleDemo.availableColors。

You may also use the refresh-delay attribute to specify how many milliseconds to debounce the function so it is not called too many times in quick succession.

您还可以使用refresh-delay属性来指定去抖函数的毫秒数，以便快速连续调用太多次。

I have also put availableColors on multipleDemo like you have done for multipleDemo.colors, as is recommended.

我已经像在multiDemo.colors上那样在multiDemo上放置了availableColors，这是推荐的。

Reference: ui-select directive wiki under section Examples: Async.

参考：ui-select指令wiki下的例子：Async。

#2

There seems to be an on-select attribute, see Github example:

似乎有一个on-select属性，请参阅Github示例：

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

#3

Use ngInit to get the value,

使用ngInit获取值，

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

You can alse watch 'mySelect' instead

您也可以改为观看'mySelect'

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

#4

Bear with me, this is my first answer on SO.

请耐心等待，这是我对SO的第一个回答。

So the current top answer does not work for me. Just want to provide another option. The refresh property on the ui-select-choices does not trigger the named function in my scope.

所以目前的最佳答案对我不起作用。只是想提供另一种选择。 ui-select-choices上的refresh属性不会触发我的作用域中的命名函数。

I followed the info in their docs for accessing the UI select for custom features. Create a custom directive in which you watch $select.search like

我按照他们的文档中的信息访问自定义功能的UI选择。创建一个自定义指令，您可以在其中查看$ select.search之类的

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

and then include the directive on your <ui-select my-ui-select> tag.

然后在标记中包含该指令。

#5

-1

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.

这样做的缺点是我将它直接放在第三方的指令中，因此无法安全更新。我需要找到一种覆盖指令的方法。如果您有任何想法，请告诉我。

#1