angular 1.5（components）：es6でディレクティブを使用する方法は？フォルダ<code>directives</code>で

Question

私は2つのファイルが作成された：

import angular from 'angular'; 

import ColorDirective from './color'; 

const moduleName = 'app.directives'; 

angular.module(moduleName, []) 

    .directive('color', ColorDirective); 

export default moduleName; 

color.js

：私はapp.js

directives.jsにインポートしましたdirectives.jsとcolor.js

directivesを

import angular from 'angular'; 


let ColorDirective = function() { 

    return { 
    link: function (scope, element) { 
     console.log('ColorDirective'); 
    } 
    } 

} 

export default ColorDirective; 

であり、コンポーネントiの1つの要素にattrとしてcolorが追加されています。

しかし、動作していません。私は内側のリンクループを意味します。どうして？何が間違ってコード化されている？角度1.5 & es2016のディレクティブを使用するにはどうすればよいですか？

Answer 1

問題を見ることができなかったものからです。提供するコードは、モジュールをページに組み込み、コードが正しくコンパイルされていることを前提として動作します。私はフィドルにコードを入れている

、

let ColorDirective = function() { 
    return { 
    link: function (scope, element) { 
     console.log('ColorDirective'); 
     element.text('ColorDirective'); 
    } 
    } 
} 

angular.module('app.directives', []) 
    .directive('color', ColorDirective); 

https://jsfiddle.net/fccmxchx/が、残念ながら私はモジュールにコードを分割することはできませんが、それはあなたのコードは多分あなたはちょうど `記述する必要が

Answer 2

私はES6の構文に精通していないんだけど、ここで私が使用しているtypescriptですの方法です：

class ColorDirective implements angular.IDirective { 

    constructor() { } 

    link(scope, iElement, iAttrs, ngModelCtrl) { 

    } 

    /** 
    * Instance creation 
    */ 
    static getInstance(): angular.IDirectiveFactory { 
     // deendency injection for directive 
     // http://stackoverflow.com/questions/30878157/inject-dependency-to-the-angularjs-directive-using-typescript 
     let directive: angular.IDirectiveFactory =() => new ColorDirective(); 
     directive.$inject = []; 
     return directive; 
    } 
} 

angular 
    .module('moduleName') 
    .directive('color', ColorDirective.getInstance()); 

編集：いくつかの研究の後、私は同じことを行うためのES6の道を見つけました上記：

import angular from 'angular'; 

class ColorDirective { 

    constructor() { 

    } 

    link(scope, element) { 
     console.log('ColorDirective'); 
    } 

    static getInstance() { 
     var directive = new ColorDirective(); 
    } 
} 

export default ColorDirective.getInstance();