angularjs - Angular指令未在ES6上编译

我试图用es6类构建一个指令并编译它，但是失败了。下面是定义以及如何将指令添加到应用程序中。
数据图.js

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

应用程序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>，并且没有编译该指令。在此过程中不会引发任何错误。
我想知道我写代码时是否遗漏了什么。非常感谢。

最佳答案

问题是，您为指令选择了不幸的名称。当解析模板时，角STPs data-前缀，这意味着<data-diagram></data-diagram>（基本上与<diagram></diagram>）对应于diagram指令，而不是dataDiargam。
只需更改指令的名称（例如.directive('someDataDiagram', () => new dataDiagram());）。

关于angularjs - Angular指令未在ES6上编译，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36826398/