javascript - 无法单击 ionic 搜索图标来执行搜索

Question

我有这个代码:

<ion-content padding="true" class="has-header">
    <form id="search-form2" class="list">
      <label class="item item-input" id="search-search2">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="{{staticLabels.whatToSearch}}" ng-model="vModel.searchText">
      </label>
    </form>
  </ion-content>

搜索栏仅在有人输入关键字后按 Enter 键时才起作用，但我希望用户也单击搜索图标来执行搜索。

我尝试过:

<i class="icon ion-search placeholder-icon" ng-click="vModel.somefxn()"></i>

但它不起作用......有什么想法吗？

Answer 1

虽然 ion-searchbar 指令用于搜索列表，但带有图标和搜索输入字段的版本应该可以正常工作。如果您将光标:指针 css 属性添加到 i 标记，ng-click 将正常工作。您可能想知道它只是为了在悬停时显示桌面的手形图标，但是，即使您使用传统的单击事件，它也有助于触发移动设备、选项卡上的触摸事件。所以以下应该可以正常工作:

<i class="icon ion-search placeholder-icon search" ng-click="vModel.somefxn()"></i>

搜索类别可以是:

.search {
  cursor: pointer;
  padding: 3px;
}

填充只会有助于增加搜索图标的可点击区域。

示例:https://codepen.io/anon/pen/Ogewrv