[英]AngularJS - stopPropagation
我真的很难实现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!');
});
}
};
});
您已经在stopEvent
引用了stopEvent
指令,这对我来说很好,但是您实际上并没有在HTML中使用它。 这是您所描述的内容的最基本的实现:
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!');
});
}
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.