Question

我目前正在使用Webpack玩AngularJS 1.5和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 /适用于我的控制器，例如..那么为什么不使用我的指令呢？

Answer 1

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

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

Answer 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

会有什么不同

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

2 个答案: