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'); 
     }); 
     }); 
    } 
    } 
}]); 

Я хочу, чтобы выбрать ul.bonus с помощью jqLite, но не могу найти путь. Я попытался использовать .next (". Bonus"), но селектор полностью игнорируется и выбирается первая ul. У кого-нибудь есть идея, почему я не могу этого сделать?

P.S. Я просто полагаюсь на внутренний jqLite от AngularJS без jQuery.

Спасибо!

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 состояния в контроллере.