Angularjs how to call a function of a controller from another controller

Question

I am trying to split a big controller. The way to go would be through factories, but since I am changing the DOM I should do it through controllers.

Then, what I am trying to achieve is to call a function defined in Cntrl2 from Cntrl1. The example

html

<body ng-app="app">
<div ng-controller='Cntrl1'>
{{message}}
</div>
</body>

js

var myModule = angular.module('app', []);

angular.module('app').controller('Cntrl1', 
['$scope', '$q', '$timeout', 'Share_scope', 
function ($scope, $q, $timeout, Share_scope) {
    Share_scope.process();
    $scope.message = 'started';
}]);

angular.module('app').controller('Cntrl2', 
['$scope', '$q', '$timeout', 'Share_scope', 
function ($scope, $q, $timeout, Share_scope) {
    Share_scope.x = function() {
           alert('done');
    }
}]);

angular.module('app').factory('Share_scope', 
['$window', '$q',
function($window, $q) {
    var x;
    return {
        process: function() {
            return x;
        },
    };
}]);

The demo http://jsfiddle.net/T8rgv/7/

What I would expect is to define "var x" of the factory as the function of Cntrl2, and then execute this function through the factory when I call it from Cntrl1.

So, how to make this work? Is this approach correct? Or should I just change the DOM from a factory?

Cheers, Gerard

I think you are misnaming the factory "share_scope". A factory is not scope. But you are correct in that a good way to communicate to controllers is through a factory. — koolunix
– koolunix, Commented Feb 19, 2014 at 0:14

koolunix · Accepted Answer · 2014-02-19 00:18:17Z

Not knowing where in relation Cntrl2 is to Cntrl1, I would use emit or broadcast somewhat like this. Note from past experience I don't think it's a good idea to use two or more different modules in the same page.

var myModule = angular.module('app', []);

angular.module('app').controller('Cntrl1', 
['$scope', '$q', '$timeout', 'myFactory', 
function ($scope, $q, $timeout, myFactory) {
    $scope.$emit('messageEvt','started');
    myFactory.process().then(function() {
        $scope.$emit('messageEvt','ended');
    });
}]);

angular.module('app').controller('Cntrl2', 
['$scope', '$q', '$timeout', $rootScope, 
function ($scope, $q, $timeout, $rootScope) {
    $rootScope.$on('messageEvt',function(e,msg) {
        $scope.message = msg;
    }
}]);

angular.module('app').factory('myFactory', 
['$window', '$q','$timeout',
function($window, $q,$timeout) {
    var x;
    return {
        process: function() {
            var deferObj = $q.defer();
            $timeout(function() {
                deferObj.resolve(x);
            });
            return deferObj.promise;
        },
    };
}]);

I have realised that it is ok to generate html code in a factory, it is just that that code should be inserted in the DOM in the controller, not in the factory. If this is correct, then I will use a single controller to manipulate the DOM and factories to construct the hmtl that should be added afterwards (and then the question is irrelevant)

madhured · Accepted Answer · 2014-02-19 00:25:04Z

I think better way to do this is by having factory maintain the model and both controllers updating it when needed.

I updated the fiddle to http://jsfiddle.net/hh5Cy/2/

angular.module('app').factory('Share_scope', 
['$window', '$q',
function($window, $q) {
    var x;

    return {
        getProcess: function() {
            return x;
        },
        setProcess: function(value){
           x = value;
        }
    };
}]);

Please let me know if I understood you wrongly.

Collectives™ on Stack Overflow

Angularjs how to call a function of a controller from another controller

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related