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

【问题标题】：angular 1.5 (components): how to use directives with es6?angular 1.5（组件）：如何在 es6 中使用指令？
【发布时间】：2016-10-14 00:01:11
【问题描述】：

在directives文件夹中我创建了两个文件：directives.js和color.js

directives 我已经导入 app.js

directives.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 的指令？

【问题讨论】：

也许你只需要写return response.data？取决于您返回的休息对象。
只返回 MyService.getData()，不带 .then(....) 部分。 uid-typehead 期待一个承诺
我没有使用过 resangular，所以我不确定它会返回什么。尝试将 $q 服务添加到您的控制器，并返回 $q.resolve(response) 而不是返回响应 - 这将返回一个将通过响应解决的承诺。
很高兴在 plunker 的某个地方看到整个应用程序

标签： javascript angularjs ecmascript-6

【解决方案1】：

从你写的内容看不出问题所在。您提供的代码有效，前提是您已将模块包含到页面中并且代码已正确编译。

我已将您的代码放入小提琴中，https://jsfiddle.net/fccmxchx/

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

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

很遗憾，我无法将您的代码拆分为模块，但这就是您的代码正在尝试做的事情

【讨论】：

【解决方案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();

【讨论】：

但是如何使用它，与我的结构？现在不行了