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

您的示例运行良好：example。

但对我来说，John Papa 对 angular 风格的看法很奇怪，我更喜欢 this style guide。

Answer 2

问题出在这里：

return directive;

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

function controller($http) {
...

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

This won't be minified properly. While this will be minified.

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

AngularJS ControllerAs syntax and controller injected variables

javascript

angularjs

angularjs-controller

angularjs-controlleras