gpt4 book ai didi

javascript - 以 Angular 方式将事件传递给triggerHandler

转载 作者:太空宇宙 更新时间:2023-11-04 15:46:58 25 4
gpt4 key购买 nike

我希望在单击多个不同的按钮时出现相同的菜单。

如何将原始点击事件传递给新创建的触发事件?

这就是我今天所做的:

this.openMenuFromOther = function(event) {
$timeout(function() {
var ele = document.getElementById('userMenu');
angular.element(ele).triggerHandler('click');
}, 0);
}

在演示中,您可以看到它创建了一个与原始单击事件不对应的新事件,并且菜单在主按钮上打开,而不是在单击的按钮上打开。

CODEPEN DEMO

最佳答案

简单的答案是:你不能

Angular 无意让您选择重用它。你可以看到这是他们的source code$scope.$mdMenu = {}返回不同的范围,因此阻止您更改任何变量。即使是“hacky”的方法也很难找到。

您必须更改 menuContainertriggerElement到你的新触发器,然后最后将其改回来。但正如前面提到的,这样做真的很难看。


最简洁的解决方案是制作模板。

模板包含您要重复使用的菜单。 (这应该在 <body ng-app="MyApp"> 内)

<script type="text/ng-template" id="menu">
<md-menu md-offset="0 60">
...
</md-menu>
</script>

然后你制定一个指令,例如

.directive('mdMenuButton', function($compile, $templateCache) {
return {
restrict: 'M',
replace: 'true',
template: $templateCache.get('menu')
// as of now "templateUrl" doesn't work in this case
}
})

您现在可以像这样多次重复使用此代码

<!--directive: md-menu-button -->
<br/> different stuff not related
<br/> different stuff not related

<!--directive: md-menu-button -->
<br/> different stuff not related

关于javascript - 以 Angular 方式将事件传递给triggerHandler,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43488495/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com