How to call a function inside Controller-A from Controller-B in AngularJS

Question

MY code is like this

Controller.JS
    angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', function($scope, rateRequestService) {
    $scope.rateData = [];

    rateRequestService.getData().success(function(response) {
        $scope.rateData = response;
    }).error(function (data, status, headers, config) {

         $scope.openModal();
    });
});

angular.module('RateRequestApp.controllers').controller('ModalDemoCtrl', function($scope, $modal, $log) {


    $scope.openModal = function(size) {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,

        });
    };


});


App.JS

    angular.module('RateRequestApp', [
   'RateRequestApp.services',
   'RateRequestApp.controllers',
   'ui.bootstrap'
]);

As you can see I am trying to call a function $scope.openModal(); inside another controller, And obviously it throws an error

TypeError: undefined is not a function

at line

   $scope.openModal();

Is there any way to overcome this issue?

Michael Kang · Accepted Answer · 2014-11-28 10:34:59Z

2

Since controllers are not injectable, I would not try. Try leveraging shared services instead.

answered Nov 28, 2014 at 10:34

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

4 Comments

Michael Kang Over a year ago

Well they may be injectable through the $controller service... but why would you do that? I would argue its not good design.

None Over a year ago

I don't completely understand your answer can you please elaborate more?

Michael Kang Over a year ago

You cannot inject 'ReadOnlyController' into another controllers function. Angular does not allow that. There is a good reason, it was not designed to allow that.

None Over a year ago

Isn't there any other solution for this issue?

Community · Accepted Answer · 2017-05-23 12:15:53Z

1

You can inject a controller into another controller using angular controller service $controller

angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', ['$controller','$scope', function($scope, rateRequestService,$controller) {
    var modalDCtrl = $scope.$new();
    $controller('ModalDemoCtrl',{$scope : modalDCtrl });
    $scope.rateData = [];
    rateRequestService.getData().success(function(response) {
        $scope.rateData = response;
    }).error(function (data, status, headers, config) {
        modalDCtrl.openModal();
    });
}]);

However you also need to attach the method to the controller instance instead of $scope.

angular.module('RateRequestApp.controllers').controller('ModalDemoCtrl',  function($scope, $modal, $log) {
    this.openModal = function(size) {
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
        });
    };
});

Referencing : How do I inject a controller into another controller in AngularJS

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Nov 28, 2014 at 10:26

ssayyed

7961 gold badge8 silver badges13 bronze badges

4 Comments

None Over a year ago

Your code gives me an error Error: [ng:areq] Argument 'ReadOnlyController' is not a function, got string

ssayyed Over a year ago

Edited. Perhaps because I forgot '[' for dependency injection. Basically use the same code setup you had but -inject $controller service into your 'ReadOnlyController' - Define the other controller using $controller('ModalDemoCtrl',{$scope : modalDCtrl }); - change "$scope" to "this" in 'ModalDemoCtrl'

None Over a year ago

Now this throws an error TypeError: undefined is not a function at line modalDCtrl.openModal();

ssayyed Over a year ago

Try to create an isolated scope by passing true in the $new() method - $new(true).

helloworld · Accepted Answer · 2014-11-28 10:42:10Z

Define your controllers inside the app and then inject them as required. You haven't mentioned the implementation of your model instance controller. So I assume you have forgotten to implement it.

angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', function($scope, rateRequestService) { 
                // ReadOnlyController's logic
}));

angular.module('RateRequestApp.controllers').controller('ModalDemoCtrl', function($scope, $modal, $log) { 

/**
 *  This might be missing
 */
var ModalInstanceCtrl = function ($scope, $modal) {
            // ModalInstanceController's logic
};

$scope.openModal = function(size) {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: ModalInstanceCtrl,
            size: size,

        });
    };

}));



App.JS

    angular.module('RateRequestApp', [
   'RateRequestApp.services',
   'RateRequestApp.controllers',
   'ui.bootstrap'
]);

Hope above snippet would be helpful :)

nitin · Accepted Answer · 2014-12-22 09:35:28Z

0

$controller will helpfull, try this link https://docs.angularjs.org/guide/controller you will get good idea.

answered Dec 22, 2014 at 9:35

nitin

1562 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to call a function inside Controller-A from Controller-B in AngularJS

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related