ng-include's onload generates errors with SVG elements in some browsers

[mcweiss]

If use ng-include on an SVG element and include an onload handler errors are thrown in Internet Explorer 11 (and in our selenium test runner - chutzpah, which seems to use phantomjs). This is a problem when developers use IE and it breaks our automated unit tests during builds.

It appears that SVG elements also define an attribute called "onload", which conflicts with the angular version of onload. In IE it actually attempts to call my function itself (not via angular) which results in an error.

SCRIPT5009: 'myOnLoadFunction' is undefined

For example

<svg>
<g ng-include="content.svg" onload="myload()"></g>
</svg>

will result in 2 calls to something call myload(). Once by IE, which results in an error in the console since window.myload() doesn't exist. Next angular will call scope.myload(), which is what I intended.

A workaround was to create a noop windows.myload() function. This gives something for IE to call, and prevents the error. There should be way to define an onload expression w/o interfering with the SVG onload eventing. Maybe an alternate name? (ng-onload? data-onload?)

Demo (IE 11 with console open):
http://plnkr.co/edit/OdgOanXOgLoCXDxpI5yN?p=info

[Narretz]

Hm, that's indeed a problem. Seems like the onload attribute is being handled differently by different browsers.
But! you can already use data-onload in ng-include and it'll work, because directives normalize the attribute names. We should probably add this to the docs.

[mcweiss]

Excellent! I suppose I should have thought of data-onload myself (I basically did in my suggestions I guess)... I'll chalk it up to the pressure of working late on a broken build the night before a dead line!!

Thank you for addressing this so quickly.