javascript - AngularJS - stopPropagation -

i'm struggling implement stoppropagation. i'm working multiple drop down menus. set when open menu, click anywhere outside of it, menu toggles off. ideally 1 menu should open @ time, when open 1 , click on another, first toggles off.

perhaps i'm approaching in way wrong. if so, i'd appreciate nod in correct direction!

thanks!

here how i'm handling open , close of drop menus:

<a ng-click="popout.isvisible = !popout.isvisible">drop menu #1</a> <ul ng-show="popout.isvisible">     <li>this text.</li>     <li>this text.</li>     <li>this text.</li> </ul>  <a ng-click="popout.isvisible = !popout.isvisible">drop menu #2</a> <ul ng-show="popout.isvisible">     <li>this text.</li>     <li>this text.</li>     <li>this text.</li> </ul> 

here code found creates stopevent directive, isn't working quite way need:

myapp.directive('stopevent', function () {   return {     link: function (scope, element, attr) {       element.bind(attr.stopevent, function (e) {           e.stoppropagation();           alert('alert!');       });     }   }; }); 

you've referenced stopevent directive there, looks fine me, you're not using in html. here's extremely rudimentary implementation of you've described:

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 text.</li>     <li>this 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 text.</li>     <li>this 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!');       });     }   }; });