winjs / angular-winjs

Project to smooth the AngularJS/WinJS interaction
Other
126 stars 46 forks source link

Show win-menu from win-tool-bar-command #76

Open sondreb opened 8 years ago

sondreb commented 8 years ago

What is the proper way of showing a win-menu from an win-tool-bar-command?

The example for win-menu relies only on the id element of a button:

<button id="menuAnchor">Show a menu!</button>
<win-menu anchor="'#menuAnchor'">
    <win-menu-command label="'command the first'"></win-menu-command>
    <win-menu-command label="'command the second'"></win-menu-command>
    <win-menu-command label="'this would be a great place for ng-repeater...'"></win-menu-command>
</win-menu>

the win-menu exposes these properties:

var api = {
            alignment: BINDING_property,
            anchor: BINDING_anchor,
            commands: BINDING_property,
            disabled: BINDING_property,
            hidden: BINDING_property,
            placement: BINDING_property,
            onAfterHide: BINDING_event,
            onAfterShow: BINDING_event,
            onBeforeHide: BINDING_event,
            onBeforeShow: BINDING_event
        };

I don't see how I can from my on-click handler on the win-tool-bar-command show and hide the menu?

Setting id property on the win-tool-bar-command has no effect.

Tried to look at the main source as well, and the old documentation: http://winjs.azurewebsites.net/#menu

My code looks something like this now, and I get exception: "Invalid argument: Flyout anchor element not found in DOM."

$scope.showSortMenu = function (source) {
    $scope.winMenuControl.show(source, 'top');
};
<win-tool-bar-command on-click="showSortMenu(this)" />

<win-menu win-control="winMenuControl" flyout="'#myFlyout'" anchor="'#menuAnchor'">
    <win-menu-command label="'command the first'"></win-menu-command>
    <win-menu-command label="'command the second'"></win-menu-command>
    <win-menu-command label="'this would be a great place for ng-repeater...'"></win-menu-command>
</win-menu>

<div id="myFlyout"></div>

I simply tried to add an empty myFlyout element, but obviously not working. I have also tried various solutions with and a combination of anchor, ids and flyout properties.