[英]JavaScript code works perfectly in other browsers but breaks AngularJS in ie11?
I'm using this nice directive that replicates jQuery's slideToggle in AngularJS, I've found it does not work in IE11. 我正在使用这个在AngularJS中复制jQuery的slideToggle的漂亮指令,我发现它在IE11中不起作用。 No errors, the code just doesn't work when you open the fiddle in IE11.
没有错误,当您在IE11中打开小提琴时代码不起作用。 Any ideas of how to 'fix' it so that it works in IE11?
有关如何“修复”它以便在IE11中运行的任何想法?
http://jsfiddle.net/rh7z7w0a/2/ 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
});
};
}
};
});
The problem seems to be to do with this section: 问题似乎与此部分有关:
scope.$watch(attrs.slider, (n, o) => {
Arrow functions are not supported in IE11 , so (n, o) =>
is considered invalid syntax by IE11. IE11中不支持箭头功能,因此
(n, o) =>
被IE11视为无效语法。 You should be able to use a normal anonymous function instead, like this: 您应该能够使用普通的匿名函数,如下所示:
scope.$watch(attrs.slider, function(n, o) {
...
});
Bear in mind that this
behaves differently in anonymous functions than it does to arrow functions. 请记住,
this
在匿名函数中的行为与对箭头函数的行为不同。 In your case, that isn't a problem, but it's worth reading the MDN documentation on arrow functions to know the differences. 在您的情况下,这不是问题,但值得阅读有关箭头函数的MDN文档以了解差异。
You might also want to consider a transpiler such as Babel if you want to use all of the latest ES6 features without breaking compatibility for older browsers. 如果您想使用所有最新的ES6功能而不破坏旧版浏览器的兼容性,您可能还需要考虑像Babel这样的转换程序。 Babel can convert newer code into the equivalent ES5 which is supported by nearly all browsers created within the last few years.
Babel可以将更新的代码转换为等效的ES5,几乎所有在过去几年内创建的浏览器都支持这种代码。
Arrow functions are being introduced with ES6 which is not yet compatible with many browsers and will not be anytime soon. ES6正在引入箭头功能,它与许多浏览器不兼容,不会很快就会出现。 You should use the old javascript syntax till ES6 is fully supported in all browsers.
您应该使用旧的JavaScript语法,直到所有浏览器都完全支持ES6。
Or, you can use Babel Compiler . 或者,您可以使用Babel编译器 。 It will convert your ES6 code to ES5.
它会将您的ES6代码转换为ES5。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.