Поставщик AngularJs в ES6

Question

Я пытаюсь создать провайдера в angularjs с es6, но кажется, что он не получает инъекции должным образом ($ get не получает вызов). Ниже мой код:

export default class NgIntlTelInputProvider { 
    constructor() { 
     this.props = {}; 
     this.setFn = (obj) => { 
      if (typeof obj === 'object') { 
       for (var key in obj) { 
        this.props[key] = obj[key]; 
       } 
      } 
     }; 
     this.set = this.setFn; 
    } 

    $get() { 
     return Object.create(this, { 
      init: { 
       value: (elm) => { 
        if (!window.intlTelInputUtils) { 
         console.log('intlTelInputUtils is not defined. Formatting and validation will not work.'); 
        } 
        elm.intlTelInput(props); 
       } 
      }, 
     }); 
    } 
} 

Вот мой app.js

angular.module('sample-app', [ngRoute]) 
    .config(routing) 
    .provider('ngIntlTelInputPr', NgIntlTelInputProvider) 
    .directive('ngIntlTelInput',() => new NgIntlTelInput()); 

Так что я пытаюсь внедрить поставщик в директиве, но когда я делаю так его ближайшим, как undefined. Ниже моя директива

export default class NgIntlTelInput { 
    constructor(ngIntlTelInputPr, $log, $window, $parse) { 
     this.restrict = 'A'; 
     this.require = 'ngModel' 

     this.ngIntlTelInputPr = ngIntlTelInputPr; 
     console.log('Provider:', ngIntlTelInputPr) 
    } 
} 

NgIntlTelInput.$inject = ['ngIntlTelInput', '$log', '$window', '$parse']; 

Answer 1

Там проблема в том, как вы зарегистрируетесь директиву:

.directive('ngIntlTelInput',() => new NgIntlTelInput()); 

Что такое же, как:

app.directive('ngIntlTelInput', function() { 

    return new NgIntlTelInput(); 
}); 

Как вы видите, нет никаких зависимостей, указанных в параметры для первой функции.

Это будет, например, работа:

app.directive('ngIntlTelInput', function(ngIntlTelInputPr) { 

    console.log(ngIntlTelInputPr); 

    return new NgIntlTelInput(); 
}); 

Также обратите внимание, что вам нужно вводить ngIntlTelInputPr вместо ngIntlTelInput в следующей строке:

NgIntlTelInput.$inject = ['ngIntlTelInput', '$log', '$window', '$parse'] 

К сожалению, получить директивы для работы с классами ES6 может будет довольно сложно, так как метод module.directive ожидает функции фабрики, а не конструктора.

Вы можете прочитать об этом здесь: Using ES6 Classes as Angular 1.x directives