我如何观看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.

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

这个:

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

不起作用.

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

编辑2:

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

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,因为被推荐.

参考:ui-select指令wiki下的例子:Async.

Answer 2

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

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

Answer 3

我通过在指令中的正确位置创建一个事件来解决这个问题，然后$emitting它 - 最终我能够在控制器中监听该事件并使用该值。

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