以角度傳遞事件觸發處理程序

我想要在單擊多個不同按鈕時顯示相同的菜單。以角度傳遞事件觸發處理程序

如何將原始點擊事件傳遞給新創建的觸發事件？

這是我今天做的：

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

在演示中，你可以看到它創建不與原始點擊事件對應的新事件和菜單打開主按鈕，而不是點擊按鈕。

CODEPEN DEMO

來源

2017-04-19 Mike

可能重複[怎麼辦，我叩triggerhandler上帶有一個專有的 - fake-事件參數]（http://stackoverflow.com/questions/22332338/how-do-i-call-triggerhandler-with-a-specific-fake-event-parameter） –

不，我一直在那裏，它doesn解決不了問題。 – Mike

你能解釋一下你在這裏想達到什麼目的嗎？就我所見，您可以準確地得到您期望的行爲：您觸發另一個按鈕的點擊處理程序，從而從該「已觸發」按鈕打開菜單。 –

簡單的回答是：你不能。

Angular無意讓您選擇重用它。你可以看到這是他們的source code。 $scope.$mdMenu = {}返回一個不同的範圍，因此可以防止您更改任何變量。即使是「哈克」方式也很難找到。

您必須將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

來源

2017-04-19 10:51:52 arcs

yes在最後，我用ng-include僅用於md-menu-content的內容。它解決了它（因爲我需要不同的按鈕）thx :) – Mike

-1

請原諒我的英語不好

我試試吧。如果你在triggerHandler函數中設置params，那麼在指令ng-click時不能得到參數！上下文不是角度事件指令中的初始上下文，上下文是範圍對象，並擴展了一個對象{$ event：event}，其中event是當前的單擊事件！

這裏是源代碼片段：

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>

可以節省控制器事件數據或元素或其他全局對象。

來源

2017-04-19 09:08:23

我試過了：https://codepen.io/mikila85/pen/zwrqMo無法正常工作。你能修好嗎？ – Mike

注入$ scope像$ timeout –

https://codepen.io/mikila85/pen/PmZNVx仍然不工作:( – Mike

以角度傳遞事件觸發處理程序

回答

相關問題