ste ste - 5 months ago 100
AngularJS Question

AngularJS: Failed to load module only in Safari

I'm building an AngularJS application (version: 1.4.10) and recently I found out that ONLY in Safari the application does not work.

The errors I get are the following:

[Error] SyntaxError: Unexpected token '<' (anonymous function) (angular-slide.js:1)
[Error] SyntaxError: Unexpected token '>' (anonymous function) (landing.js:132)
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
[$injector:modulerr] Failed to instantiate module myApp.landing due to:
[$injector:nomod] Module 'myApp.landing' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. (angular.js:4496)


This happens only in Safari. In Firefox and Chrome I only get this message from the console:

angular-slide.js:1 Uncaught SyntaxError: Unexpected token <


The line 132 of landing.js is the following:

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


The whole code of the directive is the following:

}]).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; height: 300px;" >' + 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
});
};
}
};
});


How can I make this directive Safari compliant and fix the error?

Answer

[Most] Browsers don't support es6 lambda's yet. You'll need to transpile your es6 to es5 using a tool like Babel.

In other words, the es5 equivalent of (n, o) => {...} is function(n, o) {...}.

Comments