Angular 指令未在 ES6 中编译答案

【问题标题】：Angular directive isn't compiled at ES6Angular 指令未在 ES6 中编译
【发布时间】：2016-08-18 00:10:38
【问题描述】：

我尝试使用 ES6 类构建指令并编译它，但失败了。这是定义以及指令如何添加到应用程序中。

dataDiagram.js

export default class dataDiagram {
  constructor() {
    this.restrict = 'E';
    this.template = '<div>This is my directive.</div>';
    this.scope = false;
  }
}

app.js

import dataDiagram from 'dataDiagram';

angular.module('myApp', [])
    .directive('dataDiagram', () => new dataDiagram());

然后我将<data-diagram></data-diagram> 添加到我的index.html 中，并期望它将变为<data-diagram><div>This is my directive.</div></data-diagram>。但是，在我重新加载应用程序后，DOM 仍然是 <data-diagram></data-diagram>，并且该指令未编译。过程中没有报错。

我想知道我在编写代码时是否遗漏了什么。非常感谢。

【问题讨论】：

标签： angularjs typescript ecmascript-6

【解决方案1】：

问题是您为指令选择了不幸的名称。 Angular 在解析模板时会提示data- 前缀，这意味着<data-diagram></data-diagram>（本质上与<diagram></diagram> 相同）对应于diagram 指令，而不是dataDiargam。

只需更改指令的名称（例如.directive('someDataDiagram', () => new dataDiagram());）。

【讨论】：

谢谢，@dfsq。这节省了我几个小时 :)

【解决方案2】：

我建议您使用ng-annotations，它可以让您轻松阅读您在 Angular 中使用的所有类。尝试通过 testDirective 更改指令的名称，否则您将拥有此 problem

【讨论】：