AngularJS - stopPropagation

Question

我真的很努力實現stopPropagation。我目前正在使用多個下拉菜單。我想設置它，這樣當你打開一個菜單，然後點擊它外面的任何地方，菜單就會切換。理想情況下，一次只能打開一個菜單，所以當你打開一個菜單然後點擊另一個菜單時，第一個菜單會打開。或許我正以一種完全錯誤的方式來解決這個問題。如果是這樣，我會很高興向正確的方向點頭！

謝謝！

這裏是我如何處理開放和降菜單關閉：

<a ng-click="popout.isVisible = !popout.isVisible">Drop Menu #1</a> 
<ul ng-show="popout.isVisible"> 
    <li>This is some text.</li> 
    <li>This is some text.</li> 
    <li>This is some text.</li> 
</ul> 

<a ng-click="popout.isVisible = !popout.isVisible">Drop Menu #2</a> 
<ul ng-show="popout.isVisible"> 
    <li>This is some text.</li> 
    <li>This is some text.</li> 
    <li>This is some text.</li> 
</ul> 

下面是一些代碼，我發現創建一個stopEvent指令，但不工作完全不一樣的，我需要：

myApp.directive('stopEvent', function() { 
    return { 
    link: function (scope, element, attr) { 
     element.bind(attr.stopEvent, function (e) { 
      e.stopPropagation(); 
      alert('ALERT!'); 
     }); 
    } 
    }; 
}); 

Answer 1

你所引用的stopEvent指令出現，這看起來好像沒什麼問題，但你沒有真正使用它在你的HTML。這裏是一個非常基本的實現你所描述的：

http://jsfiddle.net/KzfSM/1/

HTML

<div ng-app="app" ng-controller="p" ng-click="hideEverything()"> 

    <a ng-click="popout[0].isVisible = !popout[0].isVisible" stop-event="click">Drop Menu #1</a> 
<ul ng-show="popout[0].isVisible" stop-event="click"> 
    <li>1111</li> 
    <li>This is some text.</li> 
    <li>This is some text.</li> 
</ul> 

<a ng-click="popout[1].isVisible = !popout[1].isVisible" stop-event="click">Drop Menu #2</a> 
<ul ng-show="popout[1].isVisible" stop-event="click"> 
    <li>2222</li> 
    <li>This is some text.</li> 
    <li>This is some text.</li> 
</ul> 


</div> 

的JavaScript

function p($scope) { 
    $scope.popout = [ {}, {} ]; 
    $scope.hideEverything = function() { 
     alert('hiding'); 
     $scope.popout[0].isVisible = false; 
     $scope.popout[1].isVisible = false; 
    }; 
} 

angular 
.module('app', []) 
.directive('stopEvent', function() { 
    return { 
    link: function (scope, element, attr) { 
     element.bind(attr.stopEvent, function (e) { 
      e.stopPropagation(); 
      alert('ALERT!'); 
     }); 
    } 
    }; 
});