Javascript angular 1.5（组件）：如何在es6中使用指令？

在文件夹

directives

中，我创建了两个文件：

directives.js

和

color.js

指令

我已导入app.js

directions.js:

import angular from 'angular';

import ColorDirective from './color';

const moduleName = 'app.directives';

angular.module(moduleName, [])

  .directive('color', ColorDirective);

export default moduleName;

color.js

import angular from 'angular';


let ColorDirective = function () {

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

}

export default ColorDirective;

在组件中的一个元素上，我添加了

color

作为attr

---

但它不起作用。我指的是内部链接循环。为什么？我错了什么？如何在angular 1.5和es2016中使用指令？

我不太熟悉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();

---

从你所写的来看，不可能看出问题所在。假设您已将模块包含在页面中并且代码已正确编译，则您提供的代码可以正常工作

我已经把你的密码编成了小提琴

---

不幸的是，我无法将您的代码拆分为模块，但这正是您的代码要做的

也许您只需要编写

返回响应。数据

？取决于返回的rest对象。只需返回MyService.getData（），而不包含.then（..）部分。uid打字机需要一个promise，因为我没有使用resangular，所以我不确定它会返回什么。尝试将$q服务添加到您的控制器，并返回$q.resolve（response）而不是return response-这将返回一个承诺，该承诺将通过response解决。在Plunkers上的某个地方看到整个应用程序会很好，但如何使用它，以及我的结构？现在它不起作用了

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

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