[Angular.js] directives in IE8

在Angular.js中,使用directive的方式有EACM
Element, Attribute, Class 跟CoMment
也就是你可以在html中使用像下列的標籤

<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
<!-- directive: my-directive -->

然後再透過angular.js建立directive,並指定restrict指定那些標籤應該要被套用

var app = angular.module("app",[]).directive("myDirective", function () {
    return {
        restrict: 'A',
        template: "<div>hello world from attribute</div>"
    }
});

使用directive的方式,如果是透過attribute或是class的value的方式,在IE8上沒有甚麼太大的問題.
但是如果是透過element的方式的話,IE8就會出現像下面的錯誤

Error: Unknown runtime errorundefined

而要修正這個問題,你可以在header中加上下面片段

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

而如果你是透過comment的方式,在IE8也會出現相同的錯誤訊息,
而這時你就要在directive的return的object定義中加上replace:true, 如

app.directive("myDirective", function () {
    return {
        restrict: 'M',
        replace: true,
        template: "<div>hello world from comment</div>"
    }
});

而這個replace這個設定值,也是跟所產生的html很有關係.
你可以在下面這個網址玩玩看.
demo : http://jsfiddle.net/ajunlee/nA2Sr/

最後總結 : 如果要自訂directive的話,比較好的方式還是統一使用attribute或是class的方式.