使用ES6类作为Angular 1.x指令 [英] Using ES6 Classes as Angular 1.x directives

问题描述

我正在做一个小项目来玩ES6带来的好消息包，我正在设法将一个类注册为一个角度指令，但是我遇到这个错误TypeError：Can not call a class作为一个功能，但是从这些例子中，我发现他们只是写这个类，并以角度作为指令注册它。这是我的指令。

  class dateBlock {
 constructor（）{
 this.template ='/ app /dateblock/dateblock.html'; 
 this.restrict ='AE'; 
 this.scope = {}; 
} 
}; 
 
导出默认dateBlock 
  

和我的索引，我导入它然后声明

 从'./calendar/calendar.js'导入calendarController 
从'./dateblock/导入dateBlock dateblock.js'
 
函数设置（$ stateProvider）{
 $ stateProvider 
 .state（'base'，{
 url：''，
控制器：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）
  

如果我错过了一些关键的一步，我很乐意听到。另外还有一个问题是将所有应用程序组件导入索引并将其注册到所有内容，还是导出应用程序并在组件中导入和注册？

从我的角度来看，没有必要使用像register.js这样的外部库，因为你可以这样创建一个ES6类的指令：

  class MessagesDirective {
 constructor（）{
 this.restrict ='E'
 this.templateUrl ='messages.html'
 this.scope = {} 
} 
 
控制器（$ scope，$ state，MessagesService）{
 $ scope.state = $ state; 
 $ scope.service = MessagesService; 
} 
 
 link（scope，element，attrs）{
 console.log（'state'，scope.state）
 console.log（'service' scope.service）
} 
} 
 angular.module（'messages'）。directive（'messagesWidget'，（）=> new MessagesDirective）
  

使用指令控制器允许您注入依赖关系，即使没有其他声明（例如 MessagesDirective。$ inject = ['$范围'，'$ state'，'MessagesService'] ），因此如果需要，可以通过范围使用链接功能中的服务。

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?

解决方案

From my point of view, there is no need to use external libraries like register.js, because you can create directive as a ES6 class in this way:

class MessagesDirective {
    constructor() {
        this.restrict = 'E'
        this.templateUrl = 'messages.html'
        this.scope = {}
    }

    controller($scope, $state, MessagesService) {
        $scope.state = $state;
        $scope.service = MessagesService;
    }

    link(scope, element, attrs) {
        console.log('state', scope.state)
        console.log('service', scope.service)
    }
}
angular.module('messages').directive('messagesWidget', () => new MessagesDirective)

Using directive controller allows you to inject dependencies, even without additional declaration (ex. MessagesDirective.$inject = ['$scope', '$state', 'MessagesService']), so you can use services in link function via scope if you need.

这篇关于使用ES6类作为Angular 1.x指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！