Question

我是棱角分明的新手，我正在尝试使用ES6。

我有依赖注入的问题，我无法让它工作。

我的index.js：


    import './index-state.css!';
    import angular from 'angular';
    import 'angular-ui-router';
    import IndexStateController from './index-state-controller';
    import indexRouteConfig from './index-route';

    const dependencies = [
        'ui.router'
    ];

    export default angular
        .module('index-state-component', dependencies)
        .controller('IndexStateController', IndexStateController)
        .config(indexRouteConfig);

我的index-state.controller.js是：


    class IndexStateController {
        constructor($timeout) {
            this.$timeout = $timeout;
            this.controllerName = 'Example Controller';
            console.log(this.$timeout);
        }

    }

    IndexStateController.$inject =['$timeout'];

    export default [
        IndexStateController
    ];

我在console.log上得到'undefined'（这个。$ timeout）。

有人可以帮我解决这个问题吗？

由于

Answer 1

我认为您的问题是您正在导出包含控制器的数组，而不是导出控制器类本身，这意味着您已使用一组空的依赖关系覆盖$inject属性：

export default [
    IndexStateController
];

应该是：

export default IndexStateController;

或者，您可以在导出中包含注入值：

export default [
    '$timeout',
    IndexStateController
];

如果使用类似gulp之类的东西来构建代码，另一种解决方案是使用像babel这样的东西编译es6，然后使用ngAnnotate自动执行注入。在这种情况下，您可能希望将类标记为需要注入：

class IndexStateController {
    constructor($timeout) {
        "ngInject"
        this.$timeout = $timeout;
        this.controllerName = 'Example Controller';
        console.log(this.$timeout);
    }

}
export default IndexStateController;

Angular 1.5＆amp; ES6-依赖注入

1 个答案: