Angularjs directive - select next element by a class name

Question

I have the following HTML:

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

And the following directive:

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

I want to select the ul.bonus using jqLite but cannot find a way. I tried with .next(".bonus") but the selector is ignored completely and the first ul is selected. Does anyone have an idea why I can't do this?

P.S. I'm just relying on AngularJS internal jqLite without jQuery.

Thanks!

Answer 1

you will not need a directive to achieve this:

<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>

if your needs are more complex put the decision about the bonus state in your controller.