search

winjs / angular-winjs

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

win-app-bar inside of a win-pivot doesn't register click event for section='secondary' items #12

Closed mtycholaz closed 9 years ago

mtycholaz commented 9 years ago

Here's my setup

<win-pivot title="greeting">
    <win-pivot-item header="'section 1'">
        <ng-include src="'js/app/templates/MessageList.html'"></ng-include>
    </win-pivot-item>
    <win-pivot-item header="'section 2'">
        This Pivot  is boring however, it just has things like data bindings:
    </win-pivot-item>
    <win-pivot-item header="'section 3'">
        Because it's only purpose is to show how to create a Pivot
    </win-pivot-item>
</win-pivot>

and inside of MessageList.html

<div>
    <win-app-bar>
        <win-app-bar-command data-label="'Save'" data-icon="'save'"></win-app-bar-command>
        <win-app-bar-command data-label="'Delete'" data-icon="'delete'" section="'secondary'"></win-app-bar-command>
        <win-app-bar-command data-label="'Refresh'" data-icon="'refresh'" section="'secondary'"></win-app-bar-command>
    </win-app-bar>
</div>

The app bar will render, and buttons that show on the bar (section='primary') register click events. However, when you click the expand button and try to click on items within the secondary area, the click event is eaten by the

element, and it never goes through to the button (no button css active/click highlights or anything). However if you pull the win-app-bar out of the template (MessageList.html in my case) and put it beside the win-pivot, then it works fine.

So to recap, putting a win-app-bar inside a win-pivot-item doesn't work :(

<win-pivot title="greeting">
    <win-pivot-item header="'section 1'">

<!--this will NOT work-->
        <win-app-bar>
        <win-app-bar-command data-label="'Save'" data-icon="'save'"></win-app-bar-command>
        <win-app-bar-command data-label="'Delete'" data-icon="'delete'" section="'secondary'"></win-app-bar-command>
        <win-app-bar-command data-label="'Refresh'" data-icon="'refresh'" section="'secondary'"></win-app-bar-command>
    </win-app-bar>
    </win-pivot-item>
    <win-pivot-item header="'section 2'">
        This Pivot  is boring however, it just has things like data bindings:
    </win-pivot-item>
    <win-pivot-item header="'section 3'">
        Because it's only purpose is to show how to create a Pivot
    </win-pivot-item>
</win-pivot>

<!--this will work-->
<win-app-bar>
        <win-app-bar-command data-label="'Save'" data-icon="'save'"></win-app-bar-command>
        <win-app-bar-command data-label="'Delete'" data-icon="'delete'" section="'secondary'"></win-app-bar-command>
        <win-app-bar-command data-label="'Refresh'" data-icon="'refresh'" section="'secondary'"></win-app-bar-command>
    </win-app-bar>
rigdern commented 9 years ago

The AppBar needs to be a direct child of the body to avoid this kind of problem. The same applies to other overlay controls such as Flyout, SettingsFlyout, Menu, and ContentDialog.

The reason is that these controls need to be in the body's stacking context otherwise you'll run into problems like this where we can't put the AppBar above our click eating element. See this comment for more details.

mtycholaz commented 9 years ago

Hey thanks for your help. Knowing this now allows me to move forward. Nothing but developer ignorance to blame here.

perkastman commented 8 years ago

Where are you hooking up your ng-click on your app bar commands? Can't get this to work...