Dependency Injections are undefined in controller functions while using Angular1+ ES6, with controller as a class

Question

I am using ES6 class to define my controller so this is the syntax,

export class SearchBarController {
    constructor($log) {
        'ngInject';

        $log.debug("Hello");
    }

    textTyped($log){

        $log.debug("change fired.");
    }
}

view :

<input type="text" data-ng-model="vm.txt" data-ng-change="vm.textTyped()"/>

So "Hello" from within the constructor is getting logged fine. But, "change fired" within the typedText() function is not firing because apparently is undefined how do I make my class function textTyped() to access the $log service?

Note : If I assign $log to a class property in the constructor like,

this.logger = $log;

And then do,

this.logger.debug("Change fired.");

this works. But I am unsure if it's the right approach.

Update: Also, this approach exposes this reference to the $log service to the view bound to this controller. Is this harmful?

Is there a better solution?

ok thanks. But wouldn't adding it to 'this' expose it directly to the viewModel/$scope? — Rohit Rane
– Rohit Rane, Commented Mar 27, 2016 at 21:18

George Kagan · Accepted Answer · 2016-03-27 21:09:48Z

2

this.logger = $log;

As you pointed out, is the way. Since it's an object, there is no global scope.

answered Mar 27, 2016 at 21:09

George Kagan

6,1448 gold badges50 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rohit Rane Over a year ago

But wouldn't adding it to 'this' expose it directly to the viewModel/$scope?

MyruBapa · Accepted Answer · 2016-03-28 14:56:13Z

2

class SearchBarController {
    constructor($scope, $log) {
        this.log = $log;

        // Scope method
        $scope.vm = this;
    }

    textTyped(){
        this.log.debug("change fired.");
    }
}

SearchBarController.$inject = ['$scope', '$log'];

Try like this

edited Mar 28, 2016 at 14:56

answered Mar 28, 2016 at 13:48

MyruBapa

1481 gold badge2 silver badges6 bronze badges

1 Comment

Rohit Rane Over a year ago

this approach exposes this reference to the $log service to the view bound to this controller. Is this harmful? I can simply in the view do {{ controllerAs.log.debug("Abc") }}. It's ok with log but what if some other more critical service get's exposed like this?

Rohit Rane · Accepted Answer · 2016-04-16 11:25:40Z

2

In case anyone's interested I found a more elegant solution to the problem using ES6 Object Destructuring :

class ABCController {
    constructor($log, $http){
        let vm = this;
        vm.DI = () => ({$log, $http});
    }

    classFn(){
        let vm = this;
        let {$log, $http} = vm.DI();
        //Now use $log and $http straightway

        $log.debug("Testing");
        $http({...}).then();
    }

    classFn2(){
        let vm = this;
        //you can also destructure only the required dependencies in this way
        let {$http} = vm.DI();
    }
}
ABCController.$inject = ['$log', '$http'];

In this way you don't need to write ugly/confusing code like vm.DI.log, etc. Also, in this way the DIs are less exposed in the view.

edited Apr 16, 2016 at 11:25

answered Apr 12, 2016 at 19:50

Rohit Rane

2,9806 gold badges29 silver badges44 bronze badges

Collectives™ on Stack Overflow

Dependency Injections are undefined in controller functions while using Angular1+ ES6, with controller as a class

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related