角1.5& ES6依赖注射 [英] Angular 1.5 & ES6 -Dependency injection

问题描述

我很新颖，我正在尝试使用ES6。

我有一个依赖注入的问题，我不能让它工作。

我的index.js：

 
 
 import'./指数state.css'！; 
从角度导入角度; 
 import'angular-ui-router'; 
 import'./index-state-controller'的IndexStateController; 
 import indexRouteConfig from'./index-route'; 
 
 const dependencies = [
'ui.router'
]; 
 
导出默认角度
 .module（'index-state-component'，dependencies）
 .controller（'IndexStateController'，IndexStateController）
 .config（indexRouteConfig） ;我的index-state.controller.js是：
 
 
 pre> 
 
 class IndexStateController {
 constructor（$ timeout）{
 this。$ timeout = $ timeout; 
 this.controllerName ='Example Controller'; 
 console.log（this。$ timeout）; 
} 
 
} 
 
 IndexStateController $ inject = ['$ timeout']; 
 
 export default [
 IndexStateController 
]; 
 
 

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

有人可以帮助我吗？

谢谢

解决方案

我认为你的问题是你导出一个包含控制器的数组，而不是导出控制器类本身，这意味着你已经覆盖了 $ inject $ / code >属性具有一组依赖关系：

  export default [
 IndexStateController 
]; 
  

应该是：

  export default IndexStateController; 
  

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

  export default [
'$ timeout'，
 IndexStateController 
]; 
  

如果您使用类似 gulp 构建你的代码是编译es6与像babel，然后使用 ngAnnotate 自动执行注入。在这种情况下，您需要将类标记为需要注入：

  class IndexStateController {
 constructor（$ timeout） {
ngInject
 this。$ timeout = $ timeout; 
 this.controllerName ='Example Controller'; 
 console.log（this。$ timeout）; 
} 
 
} 
导出默认IndexStateController; 
  




I'm new to angular and i'm trying to use ES6.

I have a problem with dependencies inject, i can't get it to work.

My 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);

My index-state.controller.js is :

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

    }

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

    export default [
        IndexStateController
    ];

I'm getting 'undefined' on the console.log(this.$timeout).

Can someone help me through this ?

Thanks

解决方案

I think your problem is that you are exporting an array containing the controller instead of exporting the controller class itself at that means you have overriden the $inject attribute with an empty set of dependencies:

export default [
    IndexStateController
];

should be:

export default IndexStateController;

Alternatively you could include the injection values in the export:

export default [
    '$timeout',
    IndexStateController
];

Another solution if you use something like gulp to build your code is to compile es6 with something like babel and then use ngAnnotate to do the injection automatically. In that case you would want to mark the class as requiring injection:

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

}
export default IndexStateController;

这篇关于角1.5& ES6依赖注射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！