javascript - AngularJs Provider in ES6 -
i trying create provider in angularjs es6 seems not getting injected ($get not getting called). below code:
export default class ngintltelinputprovider { constructor() { this.props = {}; this.setfn = (obj) => { if (typeof obj === 'object') { (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 not defined. formatting , validation not work.'); } elm.intltelinput(props); } }, }); } }
here app.js
angular.module('sample-app', [ngroute]) .config(routing) .provider('ngintltelinputpr', ngintltelinputprovider) .directive('ngintltelinput', () => new ngintltelinput());
so trying inject provider in directive when coming undefined
. below directive
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'];
there problem how register directive:
.directive('ngintltelinput', () => new ngintltelinput());
which same as:
app.directive('ngintltelinput', function () { return new ngintltelinput(); });
as see, there no dependencies specified parameters first function.
this example work:
app.directive('ngintltelinput', function(ngintltelinputpr) { console.log(ngintltelinputpr); return new ngintltelinput(); });
also note need inject ngintltelinputpr
instead of ngintltelinput
in following line:
ngintltelinput.$inject = ['ngintltelinput', '$log', '$window', '$parse']
sadly, getting directives work es6 classes can pretty tricky, module.directive
method expects factory function rather constructor.
you can read more here: using es6 classes angular 1.x directives
Comments
Post a Comment