Directive not working in IE8

Question

I have a directive called barsMax and it is not working in IE8, even if I already placed:

<!--[if lte IE 8]> 
  <script> 
   document.createElement('bars-max'); 
  </script> 
<![endif]-->

What am I missing?

Answer 1

IE doesnt allow unfamiliar tags and therefor you may not use directives as tags like . you must use restrict "A" and use it as an attribute in a known html tag. if you dont want the wrapper tag use replace:true like this

return { restrict: 'A', replace:true, scope: ..., link:... you can see some examples about all that here https://skydrive.live.com/redir?resid=949DC4EDBFFD4738!189&authkey=!ABZCTBTTOCDYGhk

working version tested in ie8 native http://jsbin.com/IDOMuqU/2/edit (the not working version in ie8 native with the polyfills - http://jsbin.com/IDOMuqU/1/edit)

Answer 2

Code you are using also has a pseudo tag bars-current.

Adding document.createElement('bars-current'); to your polyfill worked for me.

DISCLAMER : Am Using IE10 in IE8 standards mode but error thrown in console if don't create elements first and jsfiddle itself falls apart without it in IE8

DEMO Working version