javascript - AngularJS ControllerAs 语法和 Controller 注入(inject)变量

Question

我正在编写一个指令并试图坚持 John Papa style guide .所以我也决定跳上 ControllerAs 语法旅行车，我有一个像下面这样的小指令:

(function() {
    angular
        .module('htApp')
        .directive('newsletterSignup', newsletter_signup);

    function newsletter_signup($http) {
        var directive = {
            templateUrl: '../whatever.tpl.html',
            restrict: 'EA',
            controller : controller,
            controllerAs: 'vm',
            bindToController: true
        };

        return directive;

        controller.$inject = ['$http'];

        function controller($http) {
            var vm = this;
            // $http is here ... all is good, but I don't need it

            function doSubmit(form) {
                // I need $http here, but it is null
                debugger;
            };

            vm.doSubmit = doSubmit;
        }
    }
})();

这是一项时事通讯注册服务。我将不得不执行一个 HTTP 请求，因此我将它注入(inject)到 Controller 中。一切正常 - 但从模板调用 vm.doSubmit(--formname-here--) 函数导致我无法找到 $http 服务。

所以我的问题是:如何从 doSubmit() 函数访问注入(inject)的 $http？

编辑

我将包含 View 代码 - 但不用担心 - 管道工程:

<button class="btn btn-yellow" ng-click="vm.doSubmit(newsletterform)" translate>
    footer.ok_button_text
</button>

编辑 2

事实证明，@Tek 是对的 - 代码有效。我认为我没有看到它的原因是因为(我认为)Chrome 中的 JS 运行时在知道它不会被调用时优化了 $http。

这段代码工作正常。我认为这是因为运行时在 console.log() 函数调用中预期了 $http 的使用。但是 - 如果我删除该行，我会得到这个(这就是我首先遇到这个问题的原因):

请注意，我注释掉了 console.log - 因此 doSubmit() 调用从不使用 $http。现在 - 当我在控制台中调用 $http - 它没有定义。

Answer 1

问题出在这里:

return directive;

controller.$inject = ['$http'];

function controller($http) {
...

controller函数是在return语句执行时定义的。但是 controller.$inject 永远不会被定义。此外，newsletter_signup 函数缺少相应的 $inject。

This不会是minified适本地。同时this将是 minified .