Question

我正在尝试使用es6在angularjs中创建一个提供程序，但似乎没有正确注入（$ 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

ES6中的AngularJs Provider

1 个答案: