When working with Angular1+ ES6 and using controller as a class, the utilization of Dependency Injections may be ambiguous within controller functions

Question

When working with Angular1+ ES6 and using controller as a class, the utilization of Dependency Injections may be ambiguous within controller functions

I recently started using ES6 class for defining my controller, and here is the syntax I am using:

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

        $log.debug("Hello");
    }

    textTyped($log){

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

In the view :

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

The issue I am facing is that although "Hello" from within the constructor gets logged successfully, "change fired" within the typedText() function does not fire because it is apparently undefined. How can I ensure that my class function textTyped() has access to the $log service?

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

this.logger = $log;

And then use it like this,

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

it works. However, I am unsure if this is the correct approach.

Update: Additionally, this approach exposes the this reference to the $log service in the view associated with this controller. Is this potentially harmful?

Is there a more optimal solution?

javascript angularjs dependency-injection ecmascript-6

Answer 1

Answer №1

this.logger = $log;

As you correctly noted, this is the correct approach. Due to its nature as an object, there is no reliance on a global scope.

Answer 2

this.logger = $log;

As you correctly noted, this is the correct approach. Due to its nature as an object, there is no reliance on a global scope.

Answer 3

Answer №2

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

        // Assigning to scope
        $scope.vm = this;
    }

    textTyped(){
        this.logger.debug("Text change detected.");
    }
}

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

Give it a shot with this approach

Answer 4

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

        // Assigning to scope
        $scope.vm = this;
    }

    textTyped(){
        this.logger.debug("Text change detected.");
    }
}

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

Give it a shot with this approach

Answer 5

Answer №3

If you're curious, I've come across a more elegant solution to the issue by utilizing 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 utilize $log and $http directly

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

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

This approach eliminates the need for writing messy/confusing code like vm.DI.log, etc. Moreover, it ensures that the DIs are less exposed in the view.

Answer 6

If you're curious, I've come across a more elegant solution to the issue by utilizing 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 utilize $log and $http directly

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

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

This approach eliminates the need for writing messy/confusing code like vm.DI.log, etc. Moreover, it ensures that the DIs are less exposed in the view.

When working with Angular1+ ES6 and using controller as a class, the utilization of Dependency Injections may be ambiguous within controller functions

Answer №1

Answer №2

Answer №3

Similar questions

What method does AngularJS use to distinguish between these two properties?

How can I retrieve values from JSP style tags in an AngularJS HTML view?

A guide to injecting HTML banner code with pure Vanilla Javascript

Passing state updates between child components by utilizing the useReducer hook and dispatching actions

Managing simultaneous access to a variable in NodeJS: Best practices

Modifying Arrays with Different Data Structures in JavaScript

How can you retrieve the X.509 Certificate from a P12 file using Node JS?

Error: Running the command 'yarn eg:'live-server'' is not a valid internal or external command

Tips on converting comma-separated values into HTML table rows using <tr> tags

What is the best way to eliminate the first even number from a string?

I encountered a parsing issue while trying to compile my Vue project

Is it possible to use Ajax to prompt a pop-up window for basic authentication when logging in?

Creating crawlable AMP versions of Angular websites

How can I transmit a pong frame using WebSocket in javascript/NodeJS?

Encountering issues with resolving controller parameters in AngularJS

Adding router to controller method within Laravel 5

JQuery Slider's Hidden Feature: Functioning Perfectly Despite Being Invisible

Various colored backgrounds in a random arrangement on a grid post layout

Method not found in Angular

Retrieve Cookie from a designated domain using Express