win-app-bar Problem

[oxyno-zeta]

Hello, I wrote a Windows 8 store application and I used your library in, but I have some trouble with the AppBar... I put this code in my html page :

<!-- Shows up on the bottom of the screen, use right-click or touch edgy gesture to show -->
<win-app-bar>
    <win-app-bar-command icon="'home'" label="'Home'"></win-app-bar-command>
    <win-app-bar-command icon="'save'" label="'Save'"></win-app-bar-command>
</win-app-bar>

And I have this error when I arrive on the page :

TypeError: Object does not support this action at initializeControl (ms-appx://61f6f3dd-9dda-4757-8094-11cf1d5cb766/Lib/angular-winjs.js:318:9) at link (ms-appx://61f6f3dd-9dda-4757-8094-11cf1d5cb766/Lib/angular-winjs.js:459:17) ....

Followed by that one :

WinJS.UI._Overlay.MustContainCommands: Invalid HTML : bar applications / menus must only contain the command bar applications / menu. at _Overlay_verifyCommandsOnly (ms-appx://microsoft.winjs.2.0/js/ui.js:38747:29) at AppBar_ctor (ms-appx://microsoft.winjs.2.0/js/ui.js:40600:21) at initializeControl (ms-appx://61f6f3dd-9dda-4757-8094-11cf1d5cb766/Lib/angular-winjs.js:318:9) at link (ms-appx://61f6f3dd-9dda-4757-8094-11cf1d5cb766/Lib/angular-winjs.js:415:17) at Anonymous function (ms-appx://61f6f3dd-9dda-4757-8094-11cf1d5cb766/Lib/Scripts/angular.min.js:70:132) ....

You know where is the error ? Or is it a trouble in angular-winjs ?

Thanks !

[TheWrathOfConst]

The markup you posted worked for me when I tried it. What version of WinJS are you using with this? Could you provide a repro for us?

[oxyno-zeta]

Hello, I create a repository for you : https://github.com/oxyno-zeta/AngularWinjs It is not the real project but the error is the same. (I'm not authorised to send it).

You will have to create a certificate (maybe). I'm not authorised to send mine. (Sorry).

I used WinJS 2.0.

Thanks !

[TheWrathOfConst]

Thanks. The problem is that you're using WinJS 2.0. The angular-winjs shim is built and tested for WinJS 4.0. I tried replacing the WinJS version in your project with 4.0, and that fixed the issue

[oxyno-zeta]

Ok thanks. I will try that tomorrow. If I understand well, I have to replace :

    <!-- Références WinJS -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

by :

    <!-- Références WinJS -->
    <link href="//Microsoft.WinJS.4.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.4.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.4.0/js/ui.js"></script>

?

Thanks !

[AmazingJaze]

Additionally, I believe you'll want to use WinJS 4.0 preview http://try.buildwinjs.com/#get, and not just build from the master branch since it contains some breaking API changes that I don't believe angular-winjs has been updated for yet.

Sent from Windows Mail

From: oxyno-zetamailto:notifications@github.com Sent: ?Monday?, ?April? ?13?, ?2015 ?11?:?07? ?AM To: winjs/angular-winjsmailto:angular-winjs@noreply.github.com

Ok thanks. I will try that tomorrow. If I understand well, I have to replace :

<!-- R?f?rences WinJS -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

by :

<!-- R?f?rences WinJS -->
<link href="//Microsoft.WinJS.4.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.4.0/js/base.js"></script>
<script src="//Microsoft.WinJS.4.0/js/ui.js"></script>

?

Thanks !

Reply to this email directly or view it on GitHubhttps://github.com/winjs/angular-winjs/issues/22#issuecomment-92447883.

[oxyno-zeta]

Hello !

I try with WinJS 4.0 and that is working ! So thanks !

For those that have the same problem : Download WinJS 4.0 in the Nuget window :

Install-Package WinJS -Pre

And link this and not the 2.0 library.

I close the ticket. Thanks for your time !