Angular 1.5&ES6 -Dependency injection

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 ngAnnotate这样的东西编译es6然后用来自动进行注入.在这种情况下,您可能希望将类标记为需要注入:

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

}
export default IndexStateController;