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 = {}返回不同的范围，因此会阻止您更改任何变量。甚至＆＃34; hacky＆＃34;方式真的很难找到。

您必须将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函数中设置params，那么在指令ng-click时无法获得params！上下文不是角度事件指令中的初始上下文，上下文是范围对象，并且扩展了一个对象{$ event：event}，其中event是当前的click事件！

这里是源代码段：

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

我认为这样做可以做到：

第一路;

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>

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

将事件传递给angularHandler in angular

2 个答案: