AngularJS ControllerAs syntax and controller injected variables

Question

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.

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 ):

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.

score 1 · Answer 1 · edited Feb 28 '16 at 11:09

1

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.

edited Feb 28 '16 at 11:09

Sevle

3,109
2
19
31

answered Aug 14 '15 at 12:28

Estus Flask

206,104
70
425
565

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 '15 at 12:32
`$inject` applies to code minification. Minify the code and see what happens. – Estus Flask Aug 14 '15 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 '15 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 Flask Aug 14 '15 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 '15 at 14:25
You're welcome. JP style guide is indeed good for ES5 when done right. – Estus Flask Aug 14 '15 at 14:29

score 0 · Accepted Answer · edited Aug 14 '15 at 13:09

0

Your example works just fine: example.

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

edited Aug 14 '15 at 13:09

Jochen van Wylick

5,303
4
42
64

answered Aug 14 '15 at 11:23

Alexander Strochkov

417
2
8

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 '15 at 12:14
I figured out what the problem was - you might be interested in my updated question. – Jochen van Wylick Aug 14 '15 at 12:42

AngularJS ControllerAs syntax and controller injected variables

2 Answers2