Question

我正在使用这个在AngularJS中复制jQuery的slideToggle的漂亮指令，我发现它在IE11中不起作用。没有错误，当您在IE11中打开小提琴时代码不起作用。有关如何“修复”它以便在IE11中工作的任何想法吗？

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，因此IE11将(n, o) =>视为无效语法。您应该能够使用普通的匿名函数，如下所示：

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

请记住，this在匿名函数中的行为与对箭头函数的行为不同。在您的情况下，这不是一个问题，但是值得阅读箭头函数MDN documentation来了解差异。

如果您想使用所有最新的ES6功能而不破坏旧版浏览器的兼容性，您可能还需要考虑转发器，例如Babel。 Babel可以将更新的代码转换为等效的ES5，这几乎是所有在过去几年中创建的浏览器都支持的。

Answer 2

ES6正在引入箭头功能，它与许多浏览器尚不兼容，不会很快就会出现。你应该使用旧的javascript语法，直到所有浏览器都完全支持ES6。

或者，您可以使用Babel Compiler。它会将您的ES6代码转换为ES5。

JavaScript代码在其他浏览器中运行良好，但在ie11中打破了AngularJS？

2 个答案: