2016-09-02 18 views
0

我正在研究一種側面導航,它只有一層樹狀結構。使用jqlite在AngularJS指令中監聽第一個孩子的事件

眼下每一件事情是好的,但不是監聽事件父我只是想聽聽一號一個標籤。

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

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

enter image description here

這裏發生的是,當我點擊選項1樹將展開並關閉BU即使我點擊項目1,樹也會關閉,因爲我正在聽整個元素上的事件。

回答

0

只要我發佈了問題就得到了解決方案。通過使用解決這個問題。

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

代替

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

如果任何一個崗位一個更好的解決辦法,我會接受這個答案。

相關問題