AngularJS how to use function from one controller in other controller

Question

I create modular application in angularjs, I have two modules home and templates. how to use the functions of one module into the second module
Module Home

    angular.module('home',[]).controller('homeCtrl', function($scope){
         //this function to templatesModule
         $scope.useThisFunctionInTemplateCtrl = function(){}
    })

Module templates

    angular.module('templates',[]).controller('templatesCtrl', function($scope){
         //here function from homeCtrl
         $scope.functionFromhomeCtrl = function(){}
    })

Main app.js

angular.module('myApp',['home', 'templates']);

... or consider using a service, if you wan't to share logic between controllers. — xsh.7
– xsh.7, Commented Nov 20, 2016 at 16:37
It seems like you're trying to use your controllers as a class that other controllers inherit from. Instead, have your controllers require dependencies from services (like generic functions/classmethods) — Kris Molinari
– Kris Molinari, Commented Nov 20, 2016 at 16:47
This feels like an XY problem. You have some unknown problem, and your attempted solution is to have one module call a function in a different module. Not only does this break quite a few design principles (Open/Close, Single Responsibility, Dependency Inversion, etc.), it also doesn't make for a very clear question. — Claies
– Claies, Commented Nov 20, 2016 at 16:50

mcrvaz · Accepted Answer · 2016-11-20 16:40:50Z

3

You need a service to share information between controllers:

angular.module('yourModule').factory('yourService', function(){
    var self = this;

    self.sharedFunction = function(){}

    return self;
})

And inject it in your controllers

angular.module('home',[]).controller('homeCtrl', function($scope, yourService){
     //this function to templatesModule
     $scope.useThisFunctionInTemplateCtrl = yourService.sharedFunction();
})

$rootScope is for storing global variables, it should be avoided otherwise.

answered Nov 20, 2016 at 16:40

mcrvaz

6593 silver badges10 bronze badges

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

2 Comments

georgeawg Over a year ago

The 'home' module depends on a service defined in the module named 'yourModule'. The dependency needs to be included: angular.module('home', ['yourService']).controller....

mcrvaz Over a year ago

Yes, if 'yourModule' is a new module it should be registered like angular.module('yourModule', [/*dependencies*/]), and should be included as angular.module('home',['yourModule']), or he could inject it into myApp to make it available for every other module.

Jyothi Babu Araja · Accepted Answer · 2016-11-20 16:57:32Z

0

This is not the good practice, but fulfills your need.

You can access functions over controllers using $rootScope.

1 Comment

Claies Over a year ago

while this would actually work, there are numerous reasons that this kind of practice should be avoided.

TanvirArjel · Accepted Answer · 2016-11-20 17:01:19Z

You can do it in two ways:

1. Creating and Using AngularJS Service:

Here is an complete example of how to create an AngularJS Service and use the AngularJS Service Mehtod in different Controllers:

//AngularJS Module

var app = angular.module("Demo", ["ngRoute"])

//AngularJS Route Config

app.config(function($routeProvider, $locationProvider) {
    $routeProvider.caseInsensitiveMatch = true;
    $routeProvider.when("/products/details/:id",
    {
        templateUrl: "Temaplates/details.html",
        controller: "productDetailsController"
    })
     .when("/products/edit/:id",
    {
        templateUrl: "Temaplates/edit.html",
        controller: "productEditController"
    })

// AngularJS Service

app.factory('productService', function ($http, $routeParams) {
      return {
          getDataById: function () {
              //return promise from here
              return $http.get("http://localhost:43618/api/Products", {
                  params: { id: $routeParams.id }
              });
          }
      };
  });

// AngularJS Controllers Where Service Method has been used

app.controller("productDetailsController", function ($scope, $http, $routeParams, $location, productService) {
     $scope.message = "Product Details";
     productService.getDataById().then(function (response) {
         $scope.product = response.data;
     }, function (error) {
         console.log("Error occured ", error);
     });
});

.controller("productEditController", function ($scope, $http, $routeParams, $location, productService) {
    $scope.message = "Edit Page";
    $scope.product = {};

    productService.getDataById().then(function (response) {
        $scope.product = response.data;
    }, function (error) {
        console.log("Error occured ", error);
    });

   $scope.updateProduct = function (product) {
        $http({
            method: "PUT",
            url: "http://localhost:43618/api/Products",
            params: { id: $routeParams.id },
            data: product
        })
        .success(function () {
            alert("Product Updated Successfully");
            $location.path('/products');
        });
    }

})

2. Using rootScope Object

But There is a problem using rootScope object and that is: Whenever you refresh your page rootScope object will be lost.

So it always better to use AngularJS Service over rootScope

Collectives™ on Stack Overflow

AngularJS how to use function from one controller in other controller

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related