AngularJS 1.5将服务注入ES6中的指令 [英] AngularJS 1.5 inject service into directive in ES6

问题描述

我正在使用Webpack的AngularJS 1.5和ES6版本。

我已经创建了一个指令UniqueValidator来检查电子邮件是否尚未使用。为了做到这一点，当然我已经做了一个名为RegisterService的服务。

我试图在该指令中注入这个服务，但是它不起作用（RegisterService是未定义的）
我很确定这是一个小故障，但我可以看到它...

我的模块定义：

 从角度导入角度; 
 import'angular-ui-router'; 
 import'angular-messages'; 
 
 import {UniqueValidator} from'./register.directive'; 
从'./register.component'导入registerComponent; 
 import {RegisterService} from'./../services'; 
 
 
 const module = angular.module（'register.module'，['ui.router'，'ngMessages']）
 .component（'register'，registerComponent） 
 .config（（$ stateProvider）=> {
ngInject; // ng-annotate不自动处理箭头函数;需要添加指令序言
 $ stateProvider 
 .state（'register'，{
 url：'/ register'，
 template：'< register>< / register>'
}）; 
 $）
 .service（'registerService'，RegisterService）
 .directive（'uniqueValidator'，（）=> new UniqueValidator）
 .name; 
 
导出默认模块; 
  

我的指令：

  class UniqueValidator {
 / * @ ngInject * / 
 constructor（registerService）{
 this.restrict ='A'; 
 this.require ='ngModel'; 
 this.registerService = registerService; 
 console.log（注册服务，this.registerService）; 
} 
 
 link（scope，element，attrs，ngModel）{
 if（！ngModel || ngModel。$ error [attrs.name]）return; 
 
 ngModel。$ asyncValidators.unique = function（）{
 console.log（'RegisterService'，this.registerService）; 
 return this.registerService.isUnique（'email'，element.val（））; 
}; 
} 
} 
 
 export {UniqueValidator}; 
  

注释/ @ngInject /适用于我的控制器。所以为什么不用我的指令？

解决方案

你应该注释构造函数而不是一个类：

  class UniqueValidator {
 constructor（registerService）{
 / * @ ngInject * / 
 this.restrict ='A' ; 
 this.require ='ngModel'; 
 this.registerService = registerService; 
 console.log（注册服务，this.registerService）; 
} 
 ... 
} 
  

I'm currently playing with AngularJS 1.5 and ES6 build with Webpack.

I have created a directive "UniqueValidator" to check if an email is not yet used. To do that, of course I have make a service called "RegisterService".

I'm trying to inject this service inside the directive but it doesn't work... (RegisterService is undefined) I'm pretty sure it's a little glitch but I can see it...

My module definition:

import angular from 'angular';
import 'angular-ui-router';
import 'angular-messages';

import {UniqueValidator} from './register.directive';
import registerComponent from './register.component';
import {RegisterService} from './../services';


const module = angular.module('register.module', ['ui.router', 'ngMessages'])
  .component('register', registerComponent)
  .config(($stateProvider) => {
    "ngInject";     // ng-annotate doesn't handle arrow functions automatically; need to add the directive prologue.
    $stateProvider
      .state('register', {
        url: '/register',
        template: '<register></register>'
      });
  })
  .service('registerService', RegisterService)
  .directive('uniqueValidator', () => new UniqueValidator)
  .name;

export default module;

My directive:

class UniqueValidator {
  /*@ngInject*/
  constructor(registerService) {
    this.restrict = 'A';
    this.require = 'ngModel';
    this.registerService = registerService;
    console.log("Register service", this.registerService);
  }

  link(scope, element, attrs, ngModel) {
      if (!ngModel || ngModel.$error[attrs.name]) return;

      ngModel.$asyncValidators.unique = function() {
        console.log('RegisterService', this.registerService);
        return this.registerService.isUnique('email', element.val());
      };
  }
}

export {UniqueValidator};

The annotation /@ngInject/ works well for my controllers for example.. so why not with my directive?

解决方案

You should annotate constructor function instead of a class:

class UniqueValidator {
  constructor(registerService) {
    /*@ngInject*/
    this.restrict = 'A';
    this.require = 'ngModel';
    this.registerService = registerService;
    console.log("Register service", this.registerService);
  }
  ...
}

这篇关于AngularJS 1.5将服务注入ES6中的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！