使用ES6类为角1.x的指令 [英] Using ES6 Classes as Angular 1.x directives
问题描述
我在做一个小项目，围绕礼包的ES6带来玩，我试图设置注册类作为一个角指令，但我遇到了这个错误类型错误：无法调用类作为一个函数，而是从例子中我发现，他们只写类和角作为指令进行注册。这里是我的指令。
I'm doing a small project to play around the goody bag the ES6 is bringing, I'm trying to set register a class as an angular directive, but I'm running into this error "TypeError: Cannot call a class as a function", but from the examples I'm finding they just write the class and register it with angular as a directive. Here's my directive.
class dateBlock {
constructor () {
this.template = '/app/dateblock/dateblock.html';
this.restrict = 'AE';
this.scope = {};
}
};
export default dateBlock
和我的指标，我将其导入，然后声明它。
and my index where I import it and then declare it.
import calendarController from './calendar/calendar.js'
import dateBlock from './dateblock/dateblock.js'
function setup($stateProvider) {
$stateProvider
.state('base', {
url: '',
controller: calendarController,
templateUrl: '/app/calendar/calendar.html'
});
};
setup.$inject = ['$stateProvider']
var app = angular.module('calApp',['ngAnimate','ui.router','hmTouchEvents', 'templates'])
.config(setup)
.controller('calendarController', calendarController)
.directive('dateBlock', dateBlock)
如果我错过了一些重要的一步，我很乐意听到这种说法。另外一边的问题是它的清洁剂所有的应用程序组件导入到指数和注册它们都在那里或导出应用程序，并导入和注册组件中？
If I missed some crucial step I'd love to hear it. Also side question is it cleaner to import all the apps components to the index and register them all there or export the app and import and register within the components?
推荐答案
由于在评论中提到的， module.directive（）方法需要一个工厂函数，而不是一个构造函数。
As mentioned in a comment, the module.directive() method expects a factory function rather than a constructor.
最简单的方法是将包装在返回一个实例函数类：
The most simple way would be to wrap your class in a function that returns an instance:
angular.module('app')
.directive('dateBlock', () => new DateBlock());
然而，这只会在最有限的意义上的工作 - 它不允许依赖注入和编译和链接您的指令（如果定义）的功能将无法正常工作。
However, this will only work in the most limited sense - it does not allow for dependency injection and the compile and link functions of your directive (if defined) will not work as expected.
其实，这是我看着相当广泛问题，它（至少对我来说）竟然是相当棘手的解决。
In fact, this is a problem I have looked into quite extensively and it turned out to be fairly tricky to solve (for me at least).
我写了广泛的文章涵盖了我的解决方案，但至于你担心我可以指出你的需要解决的两大问题的讨论：
I wrote an extensive article covering my solution, but as far as you are concerned I can point you to the discussion of the two main issues that need to be resolved:
-
<一个href=\"http://www.michaelbromley.co.uk/blog/350/exploring-es6-classes-in-angularjs-1-x#_section-factories\">Dynamically定义一个类转换成角兼容的工厂函数
<一个href=\"http://www.michaelbromley.co.uk/blog/350/exploring-es6-classes-in-angularjs-1-x#_section-directives\">Allowing指令的链接和编译函数定义为类方法
Allowing a directive's link and compile functions to be defined as class methods
完整的解决方案涉及太多code到粘贴在这里，我想，但我已经把一个工作演示项目，它允许您定义一个指令作为ES6类是这样的：
The full solution involves too much code to paste here, I think, but I have put together a working demo project which allows you to define a directive as an ES6 class like this:
class MyDirective {
/*@ngInject*/
constructor($interval) {
this.template = '<div>I\'m a directive!</div>';
this.restrict = 'E';
this.scope = {}
// etc. for the usual config options
// allows us to use the injected dependencies
// elsewhere in the directive (e.g. compile or link function)
this.$interval = $interval;
}
// optional compile function
compile(tElement) {
tElement.css('position', 'absolute');
}
// optional link function
link(scope, element) {
this.$interval(() => this.move(element), 1000);
}
move(element) {
element.css('left', (Math.random() * 500) + 'px');
element.css('top', (Math.random() * 500) + 'px');
}
}
// `register` is a helper method that hides all the complex magic that is needed to make this work.
register('app').directive('myDirective', MyDirective);
这里查看演示回购和的这里是背后 register.directive的code（）
这篇关于使用ES6类为角1.x的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
