JavaScript 代码在其他浏览器中完美运行但在 ie11 中中断 AngularJS？

Question

我正在使用这个很好的指令，它在 AngularJS 中复制了 jQuery 的 slideToggle，我发现它在 IE11 中不起作用。没有错误，当您在 IE11 中打开 fiddle 时，代码不起作用。关于如何 'fix' 它以使其在 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。

JavaScript 代码在其他浏览器中完美运行但在 ie11 中中断 AngularJS？

JavaScript code works perfectly in other browsers but breaks AngularJS in ie11?

javascript

angularjs

internet-explorer-11