区分一页上多个 UI-Select 控件之间的箭头点击

Question

您好，我想稍微自定义 ui-select 的行为。在模板缓存的帮助下，我在我的页面上使用了两个以引导程序为主题的 ui-select 控件。在模板中，我使用 ng-click 标签连接了箭头按钮的点击事件。这样我就可以很容易地捕捉到箭头按钮上的点击事件，并且在我的控制器中我可以使用函数打开一个弹出窗口，例如：

<button ng-click = "someFunctionInTheScope()">

例如，如果我的视图中有两个 ui-select 元素，我需要区分单击哪个箭头按钮以显示正确的弹出窗口。由于我对两个 ui-select 控件使用相同的模板，并且理论上我可以在我的页面上拥有任意数量的这些控件，因此我无法轻松地向模板中的方法添加参数以区分点击哪个 ui-select 控件的箭头图像：

<button ng-click= "someFunctionInTheScope(1)">

因为 ui-select 控件将使用相同的模板代码，并且 1 将被传递给它们的控制器函数。

因此我需要找到一种更聪明的方法来为每个控件动态更改一次模板。

所以我想过

<button ng-click= "someFunctionInTheScope($select.id)">

但是当我调试它时，我发现函数参数是未定义的，每次点击它。

有人可以告诉我如何破解这个吗？

Answer 1

$select 对象上没有 id 属性。最好的办法是通过包含 ui-select 框的元素的范围传递某些内容。换句话说，您的代码需要为您拥有的每个 ui-select 框生成一个唯一标识符。这可能是 ng-repeat 块的 $index 属性、时间戳或依赖于其他上下文的内容。

更多的上下文，我可以提供更具体的答案。

区分一页上多个 UI-Select 控件之间的箭头点击

Differentiating arrow clicks between multiple UI-Select controls on one page

angularjs

ui-select