从 ES6 到 ES5 的转换抛出语法错误答案

【问题标题】：Conversion from ES6 to ES5 throwing Syntax error从 ES6 到 ES5 的转换抛出语法错误
【发布时间】：2017-10-04 20:23:54
【问题描述】：

我正在尝试将指令从 ES6 转换为 ES5。它在声明“期待换行符或分号”的范围内以及在链接中给我语法错误：声明“函数语句应该在程序的顶层”的函数。有人可以帮助将此 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 () { foo: bar, baz: abc, ...} 没有多大意义。如果你想创建一个对象，那么你必须做function() { return {foo: ..., bar:, ... };。您可以在 MDN 上了解有关对象的更多信息。
我只是想按原样从 es6 转换为 es5。你能告诉我es5转换指令的正确方法吗？
我做到了，但又是这样：() => ({}) 变为 function() { return {}; }。箭头函数返回一个对象，因此您的函数表达式也必须返回一个对象。请不要走错路，但是你不知道() => ({})是什么意思吗？
如果我问的是业余问题，我很抱歉。但我不知道它是如何工作的。我之前从未见过任何 ES6 语法
这可能会有所帮助：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。

标签： angularjs ecmascript-6 ecmascript-5

【解决方案1】：

主要将() => { 重命名为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;
});

【讨论】：