Plunker Demo

Question

我正在尝试为子菜单提供搜索文本框。即使它工作正常，我仍然需要继续按住鼠标输入搜索文本，当我离开鼠标时子菜单关闭，我无法输入我的搜索文本。请找我的Plunker以供参考。有没有解决这个问题？

以下是我的子菜单代码：

 <li class="dropdown-submenu"><a href>Filter Sub Menu</a>   
          <ul class="dropdown-menu">
            <li>
              <input type="text" ng-model="filterSearch">
            </li>
            <li ng-repeat="filt in savedFilterList|filter:filterSearch "> <a href> {{filt.filter_name}}</a> 
            </li>
          </ul>
        </li>

Answer 1

如果你必须做一个子菜单，那么最简单的方法就是在你输入的li元素的ng-click上使用$event.stopPropagation()。

你的Plunker有点像bootstrap.css，jQuery，bootstrap.js和其他一些jQuery插件的副本。这必然会影响事情是否有效，因此我删除了与此问题无关的所有内容。

请记住，当您使用UI Bootstrap时，请不要加载bootstrap.js。 UI Bootstrap也不需要jQuery（不要加载它，除非你需要一些其他jQuery插件，你需要在AngularJS包装器中包装 - 我建议尽可能避免使用它。）

Plunker Demo

<body ng-controller="MainCtrl">
  <div class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn dropdown-toggle" dropdown-toggle>
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li>
        <a>Apply</a>
      </li>
      <li>
        <a>Cancel</a>
      </li>
      <li>
        <a>Save</a>
      </li>
      <li>
        <a>Save As</a>
      </li>
      <li class="dropdown-submenu">
        <a>Filter Sub Menu</a>
        <ul class="dropdown-menu">

          <!--ADD $event.stopPropagation() to the li that wraps the search input-->

          <li ng-click="$event.stopPropagation()" >
            <div class="input-group">
              <span class="input-group-addon">
                  <span class="sr-only">Search</span>
              <span class="glyphicon glyphicon-search"></span>
              </span>
              <input type="text" class="form-control" ng-model="filterSearch">
            </div>
          </li>
          <li ng-repeat="filt in savedFilterList|filter:filterSearch ">
            <a>{{filt.filter_name}}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

Answer 2

在搜索框上停止点击事件。

(function(){
app.directive('stopEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind('click', function (e) {
                e.stopPropagation();
            });
        }
    };
 });

}());

 <ul class="dropdown-menu">
      <li>
        <input type="text" ng-model="filterSearch" stop-event>
      </li>
      <li ng-repeat="filt in ui3DataSet.savedFilterList | filter:filterSearch"> <a href ng-click="getDataBasedonFilter(filt)"> {{filt.filter_name}}</a> 
      </li>
    </ul>

无需在Angularjs应用程序中按住鼠标单击即可搜索子菜单项

2 个答案:

Plunker Demo