Прослушивание события первого ребенка в директиве AngularJS с использованием jqlite

Question

Я работаю над боковой навигацией, которая имеет древовидную структуру только одного уровня.

Прямо сейчас все хорошо, но вместо прослушивания событий родительского li я хочу слушать только первый тег.

app.directive('subNav', function($animate, $compile) {
    return {
        link : function(scope, element, attr, controller) {
   element.on('click', function(e){
    console.log(element);
    x = element;
    controller.toggleState();    
    $compile(element.contents())(scope);
    scope.$apply();
    /**x = element;
    e.stopPropagation();
    if(element.find('ul').hasClass('ng-hide')){
     $animate.removeClass(element.find('ul'), 'ng-hide');
     scope.$apply();
    } else {
     $animate.addClass(element.find('ul'), 'ng-hide');
     scope.$apply();
    }**/
   });
        },
        controller : [function(){
   var vm = this;
   vm.toggleState = function() {
    if(vm.state === "false"){
     vm.state = false;
    }
    vm.state = !vm.state;
   };
  }],
  controllerAs : "subNav",
  scope: {
   state: '@subNav'
  },
  bindToController: true
    };
});

<ul class="navigation">
     <li class="navigation-items active" sub-nav="false" >
      <a data="main-link"><i class="material-icons">perm_identity</i> Option 1</a>
      <ul class="sub-nav animate-hide" ng-hide="!subNav.state">
       <li><a><i class="material-icons bullet">fiber_manual_record</i> Item 1</a></li>
      </ul>
     </li>
  </ul>

Здесь происходит то, что, когда я нажимаю на Вариант 1, дерево расширяется и закрывается, но большая проблема заключается в том, что даже если я нажимаю на элемент 1, дерево закрывается, когда я слушаю события всего элемента.

Answer 1

Получил решение, как только я разместил вопрос. Решил это с помощью.

angular.element(element).find('a').first().on('click', function(e){.....})

вместо

element.on('click', function(e){.....})

Если кто-нибудь опубликует лучшее решение, я приму этот ответ.