Question

如何使用es6向模式指令注入$ http？我试过这样做，但我得到$ http = undefined。最后，我尝试了vcRecaptchaService，但遇到了同样的问题。

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;

Answer 1

要将$http注入ES6类AngularJS指令，请使用$inject Property Annotation：

＆＃13;

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

＆＃13;

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

＆＃13;

另见ToddMoto: AngularJS styleguide (ES2015)

Answer 2

您可以传递一个返回类实例的函数：

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

将$ http注入angularjs指令es6

2 个答案: