Angularjs 指令 - 通过类名选择下一个元素

Question

我有以下 HTML：

<div>
  <input type="text" ng-model="search.q" special-input>
  <ul class="hidden">...</ul>
  <ul class="hidden bonus">...</ul>
</div>

还有以下指令：

myApp.directive('specialInput', ['$timeout', function($timeout)
{
  return {
    link: function(scope, element) {
      element.bind('focus', function() {
        $timeout(function() {
          // Select ul with class bonus
          element.parent().find('.bonus').removeClass('hidden');
        });
      });
    }
  }
}]);

我想使用 jqLit​​e 选择 ul.bonus 但找不到方法。我尝试使用 .next(".bonus") 但选择器被完全忽略并选择了第一个 ul 。有谁知道为什么我不能这样做？

附：我只是依靠没有 jQuery 的 AngularJS 内部 jqLit​​e。

谢谢！

Answer 1

您不需要指令来实现这一点：

<div>
  <input type="text" 
             ng-model="search.q" 
             ng-focus="bonus=true" 
             ng-blur="bonus=false">
  <ul class="hidden">...</ul>
  <ul ng-show="bonus">...</ul>
</div>

如果您的需求更复杂，请在控制器中决定 bonus 状态。