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が呼び出されないことを知っているときに最適化するためだと思います。

コードワークス

このコードは正常に動作します。これは、ランタイムが関数呼び出し$httpでの使用を予測したためだと思います。console.log()ただし、その行を削除すると、次のようになります(そもそもこの問題が発生したのはそのためです):

$http 利用できません

console.log-をコメントアウトしたことに注意してdoSubmit()ください$http。今$http、コンソールで呼び出すと、定義されていません。

4

2 に答える 2

1

問題はここにあります：

return directive;

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

function controller($http) {
...

controller関数は、returnステートメントが実行されるときに定義されます。しかし、controller.$inject決して定義されることはありません。また、newsletter_signup関数は対応する を欠いてい$injectます。

これは適切に縮小されません。これは縮小されますが。

于 2015-08-14T12:28:19.963 に答える