ES6 AngularJS指令<&燃气轮机；业务通信

我想我的js有一个范围问题。请看下面我的代码。 这是我在es6中的AngularJS示例。我用grunt browserify将代码编译成es5

如果我调用我的示例，我会得到错误： 类型错误：this.gatewayServiceGet不是一个函数 在ChainsDirective.loadChains[作为chainsServiceLoadChains]

我检查了一下，发现负荷链中的此与构造函数中的此不同

我能做什么

这是我的app.js

'use strict';

import AppController from './appController.js';
import ChainsDirective from './components/chains/chains.directive.js';
import ChainsService from './components/chains/chains.service.js';
import GatewayService from './components/common/gateway/gateway.service.js';

angular
    .module('SalesCockpit', ['ui.router', 'ui.grid'])
    .config($stateProvider => {
        $stateProvider
            .state('chains', {
                url: '/chains',
                templateUrl: 'components/chains/chains.html'
            })
            .state('chainDetail', {
                url: '/chain/{chainId:int}/detail',
                templateUrl: 'components/chain-detail/chain-detail.html'
            })
        ;

    })
    .controller('AppController', AppController)
    .service('chainsService', ChainsService)
    .service('gatewayService', GatewayService)
    .directive('chains', ChainsDirective);

这是我的连锁指令

export default function ChainsDirective() {
    class ChainsDirective {

        /*@ngInject*/
        constructor(chainsService, $state) {
            this.chainsServiceLoadChains = chainsService.loadChains;
            this.gridOptions = {
                enableColumnMenus: false,
                columnDefs: [
                    {
                        name: 'id',
                        visible: false
                    },
                    {
                        name: 'name',
                        displayName: 'Kette',
                        cellTemplate: '<div class="ui-grid-cell-contents"><a ng-click="grid.appScope.openDetail(row.entity.id)">{{row.entity.name}}</a></div>'
                    }
                ]
            };
            this.$stateGo = $state.go;
            this.fetch();
        }

        /**
         * @param int chainId
         */
        openDetail(chainId) {
            this.$stateGo('chainDetail', {chainId})
        }

        fetch() {
            return this.chainsServiceLoadChains().then(data => {
                this.gridOptions.data = data
            })
        }
    }

    return {
        restrict: 'E',
        template: '<div id="chains" ui-grid="gridOptions" external-scopes="$scope" class="grid"></div>',
        controller: ChainsDirective,
        controllerAs: 'chains'
    }
}

---

FWIW，这与ECMAScript 2015无关。JavaScript总是这样工作的

---

此

的值取决于函数的调用方式。所以如果你把它叫做

this.chainsServiceLoadChains()

此

内部

链服务加载链

将引用

之前的内容，即

此

引用

链定向

实例

一种解决方案是将函数的

值绑定到特定值：

this.chainsServiceLoadChains = chainsService.loadChains.bind(chainsService);

现在，函数的调用方式不再重要，
此
将始终引用
chainsService

了解有关此

的更多信息：

---

我假设代码是交叉编译的，而不是在Edge之类的软件中运行。你能把翻译好的代码发出去吗？我特别感兴趣的是如何翻译这门课。

this.chainsServiceLoadChains = chainsService.loadChains.bind(chainsService);