javascript - 带有 ES6 的 Angular 1.5.0 - Controller 导出不工作

Question

我有一个基于模块的应用程序。应用程序加载模块，而每个模块加载 Controller 和路由器，路由器加载 View 。如果我这样使用， Controller 绑定(bind)工作得很好:

...
module.controller('Ctrl',  function(){
  const vm = this
  // Controller stuff
});
...

但如果我尝试从外部文件加载，则不会，如下所示:

// module.controller.js
function Ctrl(){
  // Controller stuff
}
export default Ctrl

然后这样调用:

// module.js
import controller from './module.controller.js'
...
module.controller(controller.name, controller)
...

controller.name 仍然是一个有效的 'Ctrl' 字符串并且 controller 是一个有效的函数。是否缺少某些内容，例如导出 Controller 功能的不同方法或其他内容？

谢谢

Answer 1

可以看到您正在使用function 创建 Controller ，但您需要使用一个类，其中包含一个构造函数。依赖项被注入(inject)到此构造函数中，如果将它们关联为范围属性，则可以访问它们:

export default class Ctrl {
    /** @ngInject */
    constructor($timeout) {
        this.name = 'Ctrl';
        this.$timeout = $timeout;

        this.consoleName();
    }
    consoleName() {
        var vm = this;

        this.$timeout(function() {
            console.log(vm.name);
        }, 1000);
    }
}

JSFiddle:https://jsfiddle.net/7fq4dnt9/

我推荐这篇文章来比较语法和声明:

https://medium.com/@daviddentoom/switching-to-es6-with-angular-1-x-is-easy-a08c40c2fc72#.e7i1avfqp .