Angular and XSLT fails in Firefox and IE9
784 views
Skip to first unread message
Charlie
Mar 3, 2012, 8:55:44 AM3/3/12
to AngularJS
Webkit browsers work perfectly.
Timings also indicate that there is no measurable difference between
the static html page and the one generated via xslt transformation,
for those that are concerned about those things.
There is a problem with angular initialization in Firefox and IE.
The most obvious difference is that webkit browsers fire both the
"domContentLoaded" event and the "load" event vs just the "load" event
for Firefox (did not confirm this was the case with IE).
The issue can be tested with two xml files (content.xml and
content.xsl)
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="content.xsl"?>
<page/>
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/
Transform">
<xsl:output method="html" doctype-public="html" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://
angularjs.org">
<head>
<title>angular XSLT test app</title>
</head>
<body ng:app="">
<div ng:controller="xsltTestCtrl">
<p>{{item}}</p>
</div>
<script src="http://code.angularjs.org/angular-0.10.6.js"
type="text/javascript" ng:autobind="1"/>
<script>
<![CDATA[
function xsltTestCtrl($window) {
this.item = "XSLT Angular initialized";
}
]]>
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Timings also indicate that there is no measurable difference between
the static html page and the one generated via xslt transformation,
for those that are concerned about those things.
There is a problem with angular initialization in Firefox and IE.
The most obvious difference is that webkit browsers fire both the
"domContentLoaded" event and the "load" event vs just the "load" event
for Firefox (did not confirm this was the case with IE).
The issue can be tested with two xml files (content.xml and
content.xsl)
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="content.xsl"?>
<page/>
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/
Transform">
<xsl:output method="html" doctype-public="html" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://
angularjs.org">
<head>
<title>angular XSLT test app</title>
</head>
<body ng:app="">
<div ng:controller="xsltTestCtrl">
<p>{{item}}</p>
</div>
<script src="http://code.angularjs.org/angular-0.10.6.js"
type="text/javascript" ng:autobind="1"/>
<script>
<![CDATA[
function xsltTestCtrl($window) {
this.item = "XSLT Angular initialized";
}
]]>
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Vojta Jína
Mar 4, 2012, 6:10:42 PM3/4/12
to ang...@googlegroups.com
Hey Charlie,
FF's document.querySelecortAll('[ng\\:app]') does not work (it does work with html though). I believe IE has the same trouble.
So, change <body ng:app=""> to <body ng-app=""> and it should work. (If IE does not accept even this, try <body class="ng-app" ng-app="moduleToLoad">)
V.
Charlie
Mar 5, 2012, 7:26:07 AM3/5/12
to AngularJS
Thanks Vojta!
I will have to wait till I get to the office to test in IE but your
solution works in FF 3.6.
Confirmed it works with:
<xsl:output method="html" doctype-public="html" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://
angularjs.org">
<head>
<title>angular XSLT test app</title>
</head>
<div ng:controller="xsltTestCtrl">
<p>{{item}}</p>
</div>
<script src="http://code.angularjs.org/angular-0.10.6.js"
type="text/javascript" ng:autobind="1"/>
<script>
<![CDATA[
var xslServices = angular.module('xslServices', []);
<p>{{item}}</p>
</div>
<script src="http://code.angularjs.org/angular-0.10.6.js"
type="text/javascript" ng:autobind="1"/>
<script>
<![CDATA[
/* Category List Data */
xslServices.factory('CategoryList', function() {
function categorylist() {};
var self = categorylist;
categorylist.items =
["Series","Sports","Documentaries","Comedy","Movies"];
categorylist.list = function() {
return self.items;
}
return categorylist;
}, {});
function xsltTestCtrl(CategoryList,$window) {
this.item = CategoryList.items[0];
Charlie
Mar 5, 2012, 9:58:42 AM3/5/12
to AngularJS
Sadly, anything more complicated (I tried adding in a router along
with <ng:view/>) fails in FF and even the simple case above fails in
IE (is the compatibility layer required?).
This may be a show-stopper for angular+xslt.
with <ng:view/>) fails in FF and even the simple case above fails in
IE (is the compatibility layer required?).
This may be a show-stopper for angular+xslt.
Vojta Jína
Mar 7, 2012, 4:51:58 AM3/7/12
to ang...@googlegroups.com
With regards to IE, which one ? I guess ng-app is not enough for this browser, did you try adding id="ng-app" as I mentioned ?
With regards to FF, what is the problem ? I'm not aware of any limitations of XSL, so I think Angular should be good fit for it.
V.
Charlie
Mar 7, 2012, 9:36:13 AM3/7/12
to AngularJS
Vojta,
I'll put together a more robust test case as time allows.
For now it's not as much of an issue as I initially thought since I
can test the UA string on the server and perform the XSLT server-side
as required.
F.Y.I. My primary reason for doing the XSLT client-side is to optimize
SEO by only sending semantic-content/links and letting the XSLT add in
all the presentation (scripts, css and additional markup) and convert
the xml into json.
Thanks,
Charlie
I'll put together a more robust test case as time allows.
For now it's not as much of an issue as I initially thought since I
can test the UA string on the server and perform the XSLT server-side
as required.
F.Y.I. My primary reason for doing the XSLT client-side is to optimize
SEO by only sending semantic-content/links and letting the XSLT add in
all the presentation (scripts, css and additional markup) and convert
the xml into json.
Thanks,
Charlie
Charlie
Mar 14, 2012, 7:31:10 AM3/14/12
to AngularJS
https://github.com/angular/angular.js/blob/master/CHANGELOG.md
1.0.0 rc1 - moiré-vision looks like it will address the selector
issues.
1.0.0 rc1 - moiré-vision looks like it will address the selector
issues.
Reply all
Reply to author
Forward
0 new messages