CODEWITHSUNDEEP
angularjstypescriptecmascript-6
Haoliang Yu
Haoliang Yu

Reputation: 3097

Angular directive isn't compiled at ES6

I try to build a directive with ES6 class and get it compiled, but fail. Here is the definition and how the directive is added into the app.

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

Then I add the <data-diagram></data-diagram> into my index.html, and expect it will become <data-diagram><div>This is my directive.</div></data-diagram>. However, the DOM remain to be <data-diagram></data-diagram> after I reload the app, and the directive isn't compiled. No error is thrown during the process.

I would like to know if I miss something when I write the code. Thanks in adavnce.

Upvotes: 2

Views: 1343

Answers (2)

dfsq
dfsq

Reputation: 193261

The problem is that you chose unfortunate name for your directive. Angular stips data- prefixes when it parses template, which means that <data-diagram></data-diagram> (essentially is the same as <diagram></diagram>) corresponds to diagram directive, not dataDiargam.

Just change the name of the directive (e.g. .directive('someDataDiagram', () => new dataDiagram());).

Upvotes: 1

Rodrigo Juarez
Rodrigo Juarez

Reputation: 883

I recommend you to use ng-annotations, it makes simple to read all the classes that you use in angular. Try changing the name of your directive by testDirective, otherwise you will have this problem

Upvotes: 1

Related Questions