带有 ES6 的 Angular 1.5.0 - 控制器导出不起作用答案

【问题标题】：Angular 1.5.0 with ES6 - controller export not working带有 ES6 的 Angular 1.5.0 - 控制器导出不起作用
【发布时间】：2017-01-16 16:29:35
【问题描述】：

我有一个基于模块的应用程序。 app加载de模块，每个模块加载controller和router，router加载view。如果我这样使用，控制器绑定就可以正常工作：

...
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 是一个有效的函数。是否缺少某些东西，例如导出控制器功能的不同方法或其他东西？

谢谢

【问题讨论】：

您是否从该导入中接收到正确的数据？如果您控制导入的值，您可以访问您在控制器模块声明中使用的所有内容？
是的，当我 ~import controller from 'file.js'~ 并尝试记录 ~controller.name~ 它会打印有效的字符串，当我打印 ~controller~ 它会返回有效的函数。但是关于属性，我只能访问从函数返回的值，而角度控制器应该自动返回 ~this~。

标签： javascript angularjs ecmascript-6

【解决方案1】：

可以看到您正在使用function 创建控制器，但您需要使用一个类，其中包含一个构造函数。依赖项被注入到这个构造函数中，如果你将它们关联为范围属性，它们就可以被访问：

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/

【讨论】：

这在我需要的所有情况下都解决了我的问题，谢谢。但是，经过一些测试，这似乎是一些服务器配置问题，因为在某些服务器上它可以在没有对我的代码进行任何更改的情况下工作，而您的建议适用于每种情况。