从 ES6 到 ES5 的转换抛出语法错误
Conversion from ES6 to ES5 throwing Syntax error
我正在尝试将指令从 ES6 转换为 ES5。它在范围说明 "Expecting newline or semicolon" 和 link 处给我语法错误:函数说明 "Function statement should be at top level of program"。有人可以帮助将此 ES6 指令更改为 ES5
ES6 指令
directives.directive('clickAndWait', () => ({
restrict: 'A',
scope: {
asyncAction: '&clickAndWait',
},
link: (scope, element) => {
element.bind('click', () => {
element.prop('disabled', true);
// element.addClass('state-waiting');
scope.$apply(() => {
scope.asyncAction().finally(() => {
element.prop('disabled', false);
// element.removeClass('state-waiting');
});
});
});
},
}));
我在 ES5 中的代码
directives.directive('clickAndWait', function () {
return {
restrict : 'A',
scope : {
asyncAction: '&clickAndWait'
},
link : function(scope, element, attr) {
element.bind('click', function(){
element.prop('disabled', true);
scope.$apply(function () {
scope.asyncAction().finally(function () {
element.prop('disabled', false);
})
})
});
}
}
});
主要是将 () => {
重命名为 function () {
。但也要确保将 return 语句添加到指令函数中,这在箭头函数中是隐式的。
directives.directive('clickAndWait', function() {
var directiveConfig = {
restrict: 'A',
scope: {
asyncAction: '&clickAndWait',
},
link: function(scope, element) {
element.bind('click', function() {
element.prop('disabled', true);
scope.$apply(function() {
scope.asyncAction().finally(function() {
element.prop('disabled', false);
});
});
});
}
};
return directiveConfig;
});
我正在尝试将指令从 ES6 转换为 ES5。它在范围说明 "Expecting newline or semicolon" 和 link 处给我语法错误:函数说明 "Function statement should be at top level of program"。有人可以帮助将此 ES6 指令更改为 ES5
ES6 指令
directives.directive('clickAndWait', () => ({
restrict: 'A',
scope: {
asyncAction: '&clickAndWait',
},
link: (scope, element) => {
element.bind('click', () => {
element.prop('disabled', true);
// element.addClass('state-waiting');
scope.$apply(() => {
scope.asyncAction().finally(() => {
element.prop('disabled', false);
// element.removeClass('state-waiting');
});
});
});
},
}));
我在 ES5 中的代码
directives.directive('clickAndWait', function () {
return {
restrict : 'A',
scope : {
asyncAction: '&clickAndWait'
},
link : function(scope, element, attr) {
element.bind('click', function(){
element.prop('disabled', true);
scope.$apply(function () {
scope.asyncAction().finally(function () {
element.prop('disabled', false);
})
})
});
}
}
});
主要是将 () => {
重命名为 function () {
。但也要确保将 return 语句添加到指令函数中,这在箭头函数中是隐式的。
directives.directive('clickAndWait', function() {
var directiveConfig = {
restrict: 'A',
scope: {
asyncAction: '&clickAndWait',
},
link: function(scope, element) {
element.bind('click', function() {
element.prop('disabled', true);
scope.$apply(function() {
scope.asyncAction().finally(function() {
element.prop('disabled', false);
});
});
});
}
};
return directiveConfig;
});