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?

score 2 · Accepted Answer · answered Nov 28 '14 at 10:34

2

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

answered Nov 28 '14 at 10:34

Michael Kang

52,003
16
103
135

1

Well they may be injectable through the $controller service... but why would you do that? I would argue its not good design. – Michael Kang Nov 28 '14 at 10:36
I don't completely understand your answer can you please elaborate more? – None Nov 28 '14 at 10:46
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. – Michael Kang Nov 28 '14 at 10:48
Isn't there any other solution for this issue? – None Nov 28 '14 at 10:49

score 1 · Answer 2 · edited May 23 '17 at 12:15

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 '17 at 12:15

Community

1
1

answered Nov 28 '14 at 10:26

ssayyed

766
1
8
13

Your code gives me an error Error: [ng:areq] Argument 'ReadOnlyController' is not a function, got string – None Nov 28 '14 at 11:03
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' – ssayyed Nov 28 '14 at 11:48
Now this throws an error TypeError: undefined is not a function at line modalDCtrl.openModal(); – None Nov 28 '14 at 11:52
Try to create an isolated scope by passing true in the $new() method - $new(true). – ssayyed Nov 28 '14 at 12:28

score 0 · Answer 3 · answered Nov 28 '14 at 10:42

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 :)

score 0 · Answer 4 · answered Dec 22 '14 at 09:35

0

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

answered Dec 22 '14 at 09:35

nitin

156
2
13

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

4 Answers4