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

标签 javascript jquery angularjs angular-material dom-events

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

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

这就是我今天所做的:

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/

相关文章:

javascript - 合并 ramda 中的函数

javascript - 谷歌地图无法识别双重

javascript - 如何使用 javascript 保存最近的搜索?

javascript - 如何对尚不可见的元素执行 jquery 操作

javascript - AngularJS - 一切都取决于我的登录服务?

javascript - 使用jquery更改图标

javascript - 没有函数参数的不显眼的 javascript

javascript - 当用户停止在 AngularJS 中输入时执行函数

javascript - 在 ng-repeat 中动态应用格式化过滤器

javascript - 如何在 MongoDB 中按引用字段查询?