JavaScript代码在其他浏览器中完美工作，但在ie11中打破了AngularJS？

我使用这个很好的指令来复制jQuery的slideToggle在AngularJS中，我发现它在IE11中不起作用。没有错误，当你在IE11中打开小提琴时，代码不起作用。任何想法如何“修复”它，以便它在IE11中工作？JavaScript代码在其他浏览器中完美工作，但在ie11中打破了AngularJS？

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) => {

来源

2016-09-17 Andy

箭头功能not supported in IE11，所以(n, o) =>被认为是通过IE11无效的语法。您应该能够使用正常匿名函数代替，就像这样：

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

记住，this表现不同匿名函数比它箭头功能。在你的情况下，这不是问题，但值得阅读箭头函数MDN documentation以了解差异。

如果您想要在不破坏旧版浏览器的兼容性的情况下使用所有最新的ES6功能，则可能还需要考虑像Babel这样的译码器。 Babel可以将更新的代码转换为几乎所有在过去几年创建的浏览器都支持的ES5。

来源

2016-09-17 17:33:32 Aurora0001

-1

箭头功能正在与ES6一起推出，它与许多浏览器不兼容，并且不会很快。您应该使用旧的JavaScript语法，直到所有浏览器完全支持ES6。可以使用Babel Compiler。它会将您的ES6代码转换为ES5。

来源

2016-09-17 17:37:40 nikhil

我不知道为什么这个答案被否决了，它几乎和上面稍早的答案一样，也是正确的。 – Andy

JavaScript代码在其他浏览器中完美工作，但在ie11中打破了AngularJS？

回答

相关问题