0

I am using Cordova 4.0.0 with AngularJS 1.2.26, Angular-Bootstrap 0.11.2, and UI Router 0.2.11 to create apps for Android and Windows (8.0 and 8.1). I am having an issue only when running the application in Windows with ui-bootstrap templates. The same error keeps popping up for standard templates for typeahead, datepicker, and the modal dialog, "Template for directive { whatever } must have exactly one root element."

Looking at the DOM inspector within Visual Studio, it seems that every node that has the ui-view directive is getting populated with its own set of head and body tags (which wraps around the template in question). I'm guessing that this is the issue, but am having trouble pinning down where these extra nodes are being inserted, and thus, having trouble proving out the theory.

The same code works as desired in the latest Chrome, FireFox, and IE desktop browsers, as well as within Android.

Does anyone have any insight on this behavior? It might also be worthwhile to note that ngCsp is being used to alleviate dyanmic content insertion restrictions on Metro applications.

Thanks in advance!

2 Answers 2

6

I found that the problem was in the shim winstore-jscompat.js

The method used to add the new tags has a bug. My version of that method is:

cleansePropertySetter("innerHTML", function (propertyDescriptor, target, elements) {
        empty(target);
        for (var elementIndex = 0, elementsLength = elements.length; elementIndex < elementsLength; elementIndex++) {
            if (elements[elementIndex].nodeName == 'BODY') {
                for (var childIndex = 0, amountOfChildren = elements[elementIndex].childNodes.length; childIndex < amountOfChildren; childIndex++) {
                    target.appendChild(elements[elementIndex].childNodes[0]);
                }
            }
        }
    });

This did the trick for me. I have not yet tested all variations of directives.

1

The fix above didn't work for me, but I found a Fork that fixes the issue:

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".

Also here is the original issue:

https://github.com/MSOpenTech/winstore-jscompat/issues/8
1
  • This one worked for me, thanks! I had actually given upon doing the native build and was working toward a Chrome application instead. Now I have two options, which is great.
    – GrumpyMonk
    Feb 2, 2015 at 19:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.