Commands in secondary section not clickable

[Haicey]

So i have this snippet and commands with section="'secondary'" does not respond to click event but those assigned primary (or nothing at all) responds as expected.

<win-app-bar>
 <win-app-bar-command icon="'home'" label="'Home'" ng-click="goHome()"></win-app-bar-command>
....
  <win-app-bar-command icon="'clock'" label="'Clock'" ng-click="showClock()" section="'secondary'"></win-app-bar-command>
</win-app-bar>

Home works but Clock doesn't... Am I missing anything?

[perkastman]

I have the same issue.

If I look at the DOM I can see the following hidden markup in the win-commandingsurface-overflowareacontainer that has the ng-click set:

<button class="ng-scope ng-isolate-scope win-disposable win-command win-commandingsurface-command-secondary-overflown" role="menuitem" aria-label="Uppdatera" type="button" ng-click="refresh()" label="'Uppdatera'" section="'secondary'" ng-transclude="true"> <span tabindex="-1" class="win-commandicon" aria-hidden="true"> <span tabindex="-1" class="win-commandimage" aria-hidden="true"></span></span> <span tabindex="-1" class="win-label" aria-hidden="true">Uppdatera</span> </button>

If I set visible to true a command shows up in the main app bar area and everything works as expected.

The markup that is generated in the secondary area is however:

<button class="win-disposable win-command win-command-button" role="menuitem" aria-label="Uppdatera" type="button"><div class="win-menucommand-liner"><span class="win-toggleicon" aria-hidden="true"></span><span class="win-label" aria-hidden="true">Uppdatera</span><span class="win-flyouticon" aria-hidden="true"></span></div></button>

As you can see in the markup the ng-click is not copied to the secondary markup.

[AmazingJaze]

This is related to a known issue in the current AppBar implementation. winjs/winjs#1196
Any attempt to set a click handler on the element without notifying the AppBarCommand object itself will have this problem. Furthermore, the AppBarCommand's own AddEventListener property is flawed.

Right now the only workaround is to set the onclick property on the AppBarCommand's win-control object directly.

For example:

<win-appbar-command icon="'home'" label="'Home'" win-control="'iconCommand'"> 
</win-app-bar-command>
<win-app-bar-command type="'toggle'" icon="'world'" label="Earth" win-control="'toggleCommand'"></win-app-bar-command>

// Now you can access your the AppBarCommand objects directly through the $Scope object.
$Scope.iconCommand.onclick = function(e){ console.log("click happens")};
$Scope.toggleCommand.onclick = function(e){ 
   $Scope.toggleCommand.label = "Mars";
};

[AmazingJaze]

Specifically, any AppBarCommands that appear in the AppBar's overflow area will encounter this problem. This includes all secondary commands, and any primary commands that need to overflow when there is not enough room in the primary action area.

[perkastman]

Ok thank you @AmazingJaze for information and the workaround. I tried the workaround but I'm obviously doing something wrong since the property I give to win-control="" ends up in a nested child scope two levels down from the current controller scope. Any idea why?

[Haicey]

Thanks @AmazingJaze I couldn't get the example you provided here to work but was able to use the one provided at winjs/winjs#1196.