JavaScriptコードは他のブラウザでも機能しますが、ie11ではAngularJSが壊れていますか？

Question

AngularJSでjQueryのslideToggleを複製するこの素敵なディレクティブを使用しています。IE11では動作しません。エラーはなく、コードはIE11でフィディルドを開くと機能しません。どのようにIE11で動作するように '修正'のアイデアですか？

http://jsfiddle.net/rh7z7w0a/2/

angular.module('angularSlideables', []) 
.directive('slider', function() { 
    return { 
     restrict:'A', 
     compile: function (element) { 
      // wrap tag 
      var contents = element.html(); 
      element.html('<div class="slideable_content" style=" margin:0 !important; padding:0 !important" >' + contents + '</div>'); 

      return function postLink(scope, element, attrs) { 
       var i = 0; 
       // default properties 
       scope.$watch(attrs.slider, (n, o) => { 
        if (n !== o) { 
         i++; 
         var target = element[0], 
          content = target.querySelector('.slideable_content'); 
         if(n) { 
          content.style.border = '1px solid rgba(0,0,0,0)'; 
          var y = content.clientHeight, z = i; 
          content.style.border = 0; 
          target.style.height = y + 'px'; 
          setTimeout(() => { 
           if (z === i) { 
            target.style.height = 'auto'; 
           } 
          }, 500); 
         } else { 
          target.style.height = target.clientHeight + 'px'; 
          setTimeout(() => { 
           target.style.height = '0px'; 
          }); 
         } 
        } 
       }); 

       attrs.duration = (!attrs.duration) ? '0.5s' : attrs.duration; 
       attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing; 
       element.css({ 
        'overflow': 'hidden', 
        'height': '0px', 
        'transitionProperty': 'height', 
        'transitionDuration': attrs.duration, 
        'transitionTimingFunction': attrs.easing 
       }); 
      }; 
     } 
    }; 
}); 

問題は、このセクションで行うことのようです：

scope.$watch(attrs.slider, (n, o) => { 

Answer 1

アロー機能がnot supported in IE11あるので、(n, o) =>は、IE11で無効な構文と考えられています。あなたはこのように、代わりに通常の無名関数を使用することができるはずです。

scope.$watch(attrs.slider, function(n, o) { 
    ... 
}); 

ベア心​​の中でそれが機能を矢印よりもthisは無名関数に異なる動作をすることを。あなたの場合、これは問題ではありませんが、相違点を知るために矢印機能のMDN documentationを読む価値があります。

旧式のブラウザとの互換性を損なうことなく最新のES6機能をすべて使用する場合は、Babelなどのトランスパイライザを使用することもできます。 Babelは、新しいコードを過去数年間に作成されたほぼすべてのブラウザでサポートされている同等のES5に変換できます。

Answer 2

多くのブラウザとまだ互換性がなく、すぐには機能しないES6で矢印機能が導入されています。すべてのブラウザでES6が完全にサポートされるまで、古いjavascript構文を使用する必要があります。

または、Babel Compilerを使用できます。 ES6コードをES5に変換します。