Question

我尝试使用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>，并且该指令未被编译。在此过程中不会抛出任何错误。

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

Answer 1

我建议您使用ng-annotations，这样可以简单地阅读您在angular中使用的所有类。尝试通过testDirective更改指令的名称，否则您将拥有此problem

Answer 2

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

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

Angular指令不在ES6编译

2 个答案: