3

我正在写一个指令，并试图坚持John Papa 风格指南。所以我也决定跳上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服务。

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

编辑

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

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

编辑 2

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

code_works

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

$http 不可用

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

4

2 回答 2

1

问题在这里：

return directive;

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

function controller($http) {
...

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

这不会被正确缩小。虽然这将被缩小。

于 2015-08-14T12:28:19.963 回答
0

你的例子工作得很好：example。

但就我而言，John Papa 对 Angular 风格的看法很奇怪，我更喜欢这个风格指南。

于 2015-08-14T11:23:48.133 回答