angularjs - 我如何 $watch Angular-ui 的新 ui-select(以前的 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 .

有谁知道我应该如何在我的 Controller 中使用那个？

这个:

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

不起作用。

编辑:
对于任何人的引用，请参阅以下简短讨论: Is it possible to add support for custom query function like the select2?

编辑2:

我通过使用 $emit 解决了这个问题从指令中，因此该值现在在我的 Controller 中可用。但是现在我想知道如何覆盖指令的这一部分，以便指令本身可以保持完整，这样它就不会在 future 的更新中中断？

Answer 1

使用 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 所做的那样, 原样 recommended .

引用: ui-select directive wiki下 示例:异步 .