Question

文件夹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。

但它不起作用。我的意思是内部链接循环。为什么？我编码错了什么？如何使用1.5和1.5角的指令es2016？

Answer 1

我对es6语法不是很熟悉，但这里是我使用的打字稿：

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

Answer 2

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

我已将您的代码放入小提琴，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);

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

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

2 个答案: