Executing one controller function from another controller in Typescript

Question

Executing one controller function from another controller in Typescript

There are two typescript controllers in my project

Controller A
{
   public methodOfA()
   {//perform some action}
}

Controller B
{
   public methodOfB()
   {//perform some action}
}

I am trying to implement the following functionality

Controller B
{
   A.methodOfA();
}

angularjs typescript

Answer 1

Answer №1

Perhaps a potential solution could look like the code snippet below:

class ManagerX
{
    constructor($scope)
    {
        //perform certain actions
    }

    public static executeTask()
    {
        //carry out specific task
    }
}

class ManagerY
{
    constructor($scope)
    {
        //take necessary steps
        ManagerX.executeTask();
    }
}

It is worth noting, as mentioned by others in the comments, that it may be advisable to utilize services instead of this approach.

Answer 2

Perhaps a potential solution could look like the code snippet below:

class ManagerX
{
    constructor($scope)
    {
        //perform certain actions
    }

    public static executeTask()
    {
        //carry out specific task
    }
}

class ManagerY
{
    constructor($scope)
    {
        //take necessary steps
        ManagerX.executeTask();
    }
}

It is worth noting, as mentioned by others in the comments, that it may be advisable to utilize services instead of this approach.

Answer 3

Answer №2

     class ControllerA {
           static $inject = ['$http', '$scope','app.services.CommonService'];
           constructor(
                private $http: ng.IHttpService,
                private $scope: ng.IScope, 
                private commonService: app.services.ICommonService){

            }
         //calling a common method from controller A
         this.commonService.CommonMethod();
        }

     class ControllerB {
            static $inject = ['$http', '$scope','app.services.CommonService'];
            constructor(
                private $http: ng.IHttpService,
                private $scope: ng.IScope, 
                private commonService: app.services.ICommonService){

            }
         //executing a common method from controller B
         this.commonService.CommonMethod();
       }

 module app.services {   
     //common interface for making service accessible
     export interface ICommonService {
         CommonMethod();
     }

     export class CommonService implements ICommonService{
            static $inject = ['$http'];
            constructor(private $http: ng.IHttpService) {

            }

            public CommonMethod(){
                //implementation of a common method here
            }
     }

     factory.$inject = ['$http'];
     function factory($http: ng.IHttpService) {
        return new CommonService($http);
     }

     angular.module('yourApp')
     .factory('app.services.CommonService', factory);
}

Using a shared service to expose commonly used methods was suggested by Kobi.

Answer 4

     class ControllerA {
           static $inject = ['$http', '$scope','app.services.CommonService'];
           constructor(
                private $http: ng.IHttpService,
                private $scope: ng.IScope, 
                private commonService: app.services.ICommonService){

            }
         //calling a common method from controller A
         this.commonService.CommonMethod();
        }

     class ControllerB {
            static $inject = ['$http', '$scope','app.services.CommonService'];
            constructor(
                private $http: ng.IHttpService,
                private $scope: ng.IScope, 
                private commonService: app.services.ICommonService){

            }
         //executing a common method from controller B
         this.commonService.CommonMethod();
       }

 module app.services {   
     //common interface for making service accessible
     export interface ICommonService {
         CommonMethod();
     }

     export class CommonService implements ICommonService{
            static $inject = ['$http'];
            constructor(private $http: ng.IHttpService) {

            }

            public CommonMethod(){
                //implementation of a common method here
            }
     }

     factory.$inject = ['$http'];
     function factory($http: ng.IHttpService) {
        return new CommonService($http);
     }

     angular.module('yourApp')
     .factory('app.services.CommonService', factory);
}

Using a shared service to expose commonly used methods was suggested by Kobi.

Executing one controller function from another controller in Typescript

Answer №1

Answer №2

Similar questions

Construct a string by combining the elements of a multi-dimensional array of children, organized into grouped

Issues occur during installation of Angular on Mac Catalina, encountering errors while trying to run the installation command for Angular: `% sudo npm

Is there a way to insert rows and columns into the table headers using React Material UI?

A more efficient method for defining and utilizing string enums in Typescript

The call to the hooks is not valid. Hooks must be called within the body of a functional component

Positional vs Named Parameters in TypeScript Constructor

Unable to retrieve array data using the post method in PHP and Angular.js

Utilize array mapping to alter the complete object

Angular Translate Text Selection Using Protractor

Sending a CSS class to an Angular library

Expanding the Mui Typescript breakpoints within a TypeScript environment

An excellent server-side resolution for the Angular.js

Integrating external JavaScript libraries into Ionic using the correct process

Display div content depending on the clicked ID in AngularJS

Using AngularJS ng-repeat to pass href links

AngularJS is patiently awaiting the completion of the translation rendering process

Concealing the sidebar in React with the help of Ant Design

How can you assign various models to a single directive?

When choosing an item in the typeahead feature, the selected value is empty

What steps should be taken to properly assess an AngularJS provider setup?