AngularJS 1.5はES6の指令にサービスを注入します

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

との違いだろうと想像することはできません