AngularJS ControllerAs 语法和控制器注入变量

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 请求，因此我将它注入到控制器中。一切都很好 - 但从模板调用 vm.doSubmit(--formname-here--) 函数导致我无法找到 $http 服务。

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

编辑

我将包含视图代码 - 但不用担心 - 管道工程：

<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。

Answer 2

您的示例运行良好：example。

但就我而言，John Papa 对 Angular 风格的看法很奇怪，我更喜欢 this style guide。