使用 jqlite 在 AngularJS 指令中的第一个 child 监听事件

Question

我正在开发侧边导航，它的树结构只有一层深。

现在一切都很好，但我不想听 parent li 的事件，我只想听 1st a 标签。

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){.....})

如果有人发布更好的解决方案，我会接受这个答案。

使用 jqlite 在 AngularJS 指令中的第一个 child 监听事件

Listen event on 1st child in AngularJS directive using jqlite

javascript

jquery

angularjs

angularjs-directive

jqlite