ES6で角ディレクティブがコンパイルされない

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()); 

は、その後、私は私のindex.htmlに<data-diagram></data-diagram>を追加し、それが<data-diagram><div>This is my directive.</div></data-diagram>になることを期待しています。しかし、私はアプリをリロードした後、DOMは<data-diagram></data-diagram>のままであり、ディレクティブはコンパイルされません。プロセス中にエラーはスローされません。

私はコードを書くときに何かが恋しいのかどうか知りたいです。ありがとうございました。

Answer 1

問題はあなたの指示に不幸な名前を選んだことです。テンプレートが解析されるときに角のスティッフdata-の接頭辞は、<data-diagram></data-diagram>（実質的には<diagram></diagram>と同じです）がのディレクティブに対応し、dataDiargamではないことを意味します。

ディレクティブの名前を変更するだけです（例：.directive('someDataDiagram',() => new dataDiagram());）。

Answer 2

ng-annotationsを使用することをお勧めします。角度で使用するすべてのクラスを読みやすくなっています。 testDirectiveでディレクティブの名前を変更してみてください。それ以外の場合は、これがあります。problem