AngularJS 1.5 将服务注入到 ES6 中的指令中答案

【问题标题】：AngularJS 1.5 inject service into directive in ES6AngularJS 1.5 将服务注入到 ES6 中的指令中
【发布时间】：2016-10-30 20:16:45
【问题描述】：

我目前正在使用 AngularJS 1.5 和使用 Webpack 构建的 ES6。

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

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

我的模块定义：

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;

我的指令：

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};

注释 /@ngInject/ 例如适用于我的控制器.. 那么为什么不使用我的指令呢？

【问题讨论】：

标签： angularjs ecmascript-6

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我知道这是旧的，但对于任何有问题的人。我能让这个工作的唯一方法是注入一个控制器函数。并将服务范围设置为this 永远不可用。

class UniqueValidator {
   controller( $scope, registerService ){
     /*ngInject*/
     $scope.registerService = registerService;
   }

   link( scope, element, attrs, ngModel ){
     console.log(scope.registerService);
   }
}

遗憾的是，我们的注射是手动完成的：

UniqueValidator.$inject = ['$scope', 'registerService'];

但我无法想象与ngInject会有什么不同

【讨论】：