inject $http to angularjs directive es6

Question

How can I inject $http to the modal directive using es6? I Tried do it like this but I get $http = undefined. At finally i'm trying vcRecaptchaService but have same problem.

class ModalDirective {
    /**
     * Constructor class ModalDirective
     */
    constructor($http) {
        this.restrict = 'E',
        this.scope = {
            show: '=',
            subm: '=',
            emailState: '=',
            requestResult: '='
        },
            this.transclude = true,
        this.template = require('./modal.tpl.html');
        this.$http = $http


    }

    link(scope, attrs) {
        scope.dialogStyle = {};
        scope.formData = {};


        scope.hideModal = function() {
            scope.show = false;
        };

     console.log(this.$http);

    }
 }
 export default ModalDirective;

look into this github.com/AngularClass/NG6-starter it might help — user93
– user93, Commented Jul 12, 2017 at 16:14

georgeawg · Accepted Answer · 2017-07-13 00:23:01Z

2

To inject $http into an ES6 class AngularJS directive, use $inject Property Annotation:

class myDirective {
  constructor ($http) {
    this.$http = $http;
  }
  link(scope, elem, attrs) {
    console.log(this.$http);
  }
}
myDirective.$inject = ["$http"];

angular.module("app",[])
.directive("myDirective", myDirective);

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app=app>
    <h1>ES6 Directive Example</h1>
    <div my-directive></div>
  </body>

See also ToddMoto: AngularJS styleguide (ES2015)

answered Jul 13, 2017 at 0:23

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dmi Over a year ago

If I do it like you sad , I get $http = undefined.

georgeawg Over a year ago

The above Demo works. What are you doing differently than the above Demo?

Dmi Over a year ago

Maybe something wrong in my modules imort file ? plnkr.co/edit/ZTwRL1E6hC5gwBPpjzAt?p=catalogue

Frank Modica · Accepted Answer · 2017-07-13 00:36:47Z

0

You can pass a function which returns an instance of your class:

angular.module('myApp').directive('modal', ['$http', $http => new ModalDirective($http)]);

edited Jul 13, 2017 at 0:36

answered Jul 13, 2017 at 0:21

Frank Modica

10.5k4 gold badges27 silver badges42 bronze badges

2 Comments

georgeawg Over a year ago

ES6 features (such as classes and arrow functions) are now all possible with AngularJS 1.5.

Frank Modica Over a year ago

@georgeawg I had no idea you could pass a class directly to .directive now. Good to know!

Collectives™ on Stack Overflow

inject $http to angularjs directive es6

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related