Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sondreb opened this issue Oct 19, 2015 · 0 comments
Open

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

sondreb opened this issue Oct 19, 2015 · 0 comments

Comments

@sondreb
Copy link
Contributor

sondreb commented Oct 19, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants