WinApp 8.1 (WinJS) App with AngularJS

Question

I am currently working on a prototyp on for testing the usability of several frameworks when developing a Win8.1 WinJS app. During the development I discovered a very strange behaviour with forms.

This is the vanilla form of an freshly created WinJS App:

What you can see is a cursor within the inputbox and half of the the copy button. Since the drop-in virtual keyboard would overlay the inputbox, it automatically scrolls the content upwards.

Now I include AngularJS 1.3.1:

Now, there is no cursor, the copy button doesn't appear and the drop-in keybord actually overlays the inputbox. It is actually not possible to change the position of the non visible cursor, so I can only prepend characters to any existing text.

I analyzed the DOM tree of both versions:

Vanilla:

Angular 1.3.1 included:

What we can see is that angular nests a second level head within the head including some weird ass css definitions. Furthermore another body tag is created within the head element. I tried to remove those after loading angular using the following snippet:

<script type="text/javascript">
  $(function () {
    $('head > head, head > body').remove();
  });
</script>

This solves the problem but now, ng-show, ng-hide directives do not work anymore. I can observe this problem only when using AngularJS in a WinJS API. I searched the internet but I didn't find any clues on that behaviour - there are actually several blogs out there describing the process of using AngularJS within a WinJS application without mentioning any such issues.

Do you guys have any idea whats going on here?

Answer 1

I see you're including winstore-jscompat.js... Please see this issue:

https://github.com/MSOpenTech/winstore-jscompat/issues/8

..which is fixed in this fork:

https://github.com/ClemMakesApps/winstore-jscompat/blob/master/winstore-jscompat.js

Note that this will probably be pulled into the main project at some point so this issue should go away "soon".