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 状态的决定放在您的 Controller 中。