3

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!

Angelin
  • 648
  • 2
  • 7
  • 19

1 Answers1

2

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.

michael
  • 16,221
  • 7
  • 55
  • 60
  • Hi, but actually how to select the next element by class using jqlite? In my case, I need to do it but can't figure out how. So far I did `link.parent().next().toggleClass('active');` which of course does not work as expected. The jQuery equivalent would be `link.parent().siblings('.active').toggleClass('active');`. Thanks for your future answer – lkartono Nov 18 '14 at 14:28