Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

I'm writing a directive and trying to stick to the John Papa style guide. So I've also decided to jump on the ControllerAs syntax wagon and I've got a tiny directive like below:

(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;
        }
    }
})();

This is a newsletter signup service. I'm going to have to do an HTTP request, therefore I'm injecting it into the controller. All is fine - but calling the vm.doSubmit(--formname-here--) function from the template results in me not being able to find the $http service.

So my question: how can I access the injected $http from the doSubmit() function?

EDIT

I'll include the view code - but no worries - the plumbing works:

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

EDIT 2

As it turns out, @Tek was right - the code works. I think the reason I didn't see it was because (I think) the JS runtime in Chrome optimizes the $http away when it knows it's not going to be called.

code_works

This code works fine. I think this is because the runtime aniticipated the usage of $http in the console.log() function call. However - if I remove that line I get this ( which was why I had this problem in the first place ):

$http not available

Notice that I commented out the console.log - thus the doSubmit() call never uses $http. Now - when I call $http in the console - it's not defined.

share|improve this question
up vote 0 down vote accepted

Your example works just fine: example.

But as for me John Papa has pretty strange vision of angular style, I prefer this style guide.

share|improve this answer
    
That's strange - can't get it to work myself. Interesting style guide - I was just reading this guy's blog this morning. Reason for using John Papa's is because I've heard it will make the transition to Angular v2 easier. – Jochen van Wylick Aug 14 at 12:14
    
I figured out what the problem was - you might be interested in my updated question. – Jochen van Wylick Aug 14 at 12:42

The problem is here:

return directive;

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

function controller($http) {
...

controller function is defined when return statement is executed. But controller.$inject will never be defined. Also, newsletter_signup function misses the corresponding $inject.

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

share|improve this answer
    
thanks but I don't think that's the problem. The code works as it turns out - I think that because of a runtime-optimization, I got the NullRef exception. I'll update my post to demonstrate. – Jochen van Wylick Aug 14 at 12:32
    
$inject applies to code minification. Minify the code and see what happens. – estus Aug 14 at 12:36
    
Thanks - but like I said - wiring up $http works just fine. Also minified. Check out my updated question though - I stumbled upon a nice quirk. – Jochen van Wylick Aug 14 at 12:40
    
I guess your question concerns Chrome debugger, not Angular DI. Despite that, your code doesn't match JP style guide, the answer addresses that. I've updated it to make it more clear. – estus Aug 14 at 13:16
    
Good point - I overlooked that. Thank you very much for pointing it out: my code was not minifying correctly indeed. – Jochen van Wylick Aug 14 at 14:25

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.