以角度将事件传递给 triggerHandler

Question

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

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

这就是我今天要做的：

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

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

CODEPEN DEMO

Answer 1

简单的答案是：你不能。

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

您必须将 menuContainer 和 triggerElement 更改为您的新触发器，然后最后将其改回。但如前所述，这样做真的很难看。

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

模板包含您要重复使用的菜单。 （这应该在<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

Answer 2

请原谅我英语不好

我试了一下。如果您在 triggerHandler 函数中设置参数，则无法在指令 ng-click 中获取参数！上下文不是角度事件指令中的初始上下文，上下文是作用域对象，并扩展了一个对象 {$event:event}，其中 event 是当前的点击事件！

这里是源sn-p代码：

element.on(eventName, function (event) {
    var callback = function () {
      fn(scope, {$event: event});
    };
    if (forceAsyncEvents[eventName] && $rootScope.$$phase) {
      scope.$evalAsync(callback);
    } else {
      scope.$apply(callback);
    }
});

我认为这些方法可以做到：

1. 第一种方式；

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

像这样使用它：

  <md-button id="userMenu" aria-label="Open phone interactions menu" 
ng-click="ctrl.openMenu($mdMenu, $menuEvent)">
        Click here to open menu
</md-button>

1. 您可以将事件数据保存在控制器或元素或其他全局对象上。