AngularJS call a function from another controller

Question

I want to call a function or change the value of variable/s which is there inside another controller. I looked online for the solution and understood that I have to create a service and use it inside both the controller, however I am not able to understand that how service will have access to $scope.home_main and $scope.home_main variables as they are in different scope.

JS

 app.controller('Controller1', function ($scope, $window) {
     $scope.toggle = function() {
         $scope.home_main = !$scope.home_main;
         $scope.full_page_place_holder = !$scope.full_page_place_holder;
     };
 });

app.controller('Controller2', function ($scope, $window) {
    $scope.onTabSelect=function(){
    // here I want to call toggle function which is inside another controller.
    };

});

Updated HTML

<div ng-controller="Controller1">
    <div ng-hide="home_main"></div>
</div>

<div ng-controller="Controller2">
    <div ng-hide="full_page_place_holder"></div>
</div>

Looked here: SO-Q1, SO-Q2. Thanks.

No service will not access those two different scope's variables. Instead these two controllers can access the same variable of a service — Vineet, Jul 09 '15 at 07:44
Right like Vineet says the idea is to have the data model in the service and have methods on the service where necessary to update the data (or expose the data on the service to both the controllers) — shaunhusain, Jul 09 '15 at 07:45
You can use emit or broadcast method to communicate between these two. — ngLover, Jul 09 '15 at 07:48
this question has already been answered, please search properly before asking — clearScreen, Jul 09 '15 at 12:05
http://stackoverflow.com/questions/17952620/angularjs-service-passing-data-between-controllers .... It has been answered here, pls check — clearScreen, Jul 09 '15 at 12:07

score 1 · Answer 1 · answered Jul 09 '15 at 12:04

you can create a service as follows,

angular.module('someApp').service('shareDataService', function() {

    var popup;

    var setDetails = function(param) {
        popup = param;
    };

    var getDetails = function() {
        return popup;
    };

    return {
        setDetails: setDetails,
        getDetails: getDetails,
    };
});

This service will not have access to the $scope variables of the two controllers, instead you can call getDetails and setDetails to get and set the variable in the service.

suppose you want to send the value of 'home_main' from controller1 to controller2, in controller1, you call the service function setDetails

 app.controller('Controller1', function ($scope, $window, shareDataService) {
     $scope.toggle = function() {
         $scope.home_main = !$scope.home_main;
         $scope.full_page_place_holder = !$scope.full_page_place_holder;
         shareDataService.setDetails($scope.home_main);     
     };
 });

and in controller2, you get the value by calling the service

app.controller('Controller2', function ($scope, $window) {

    var home_main_value = shareDataService.getDetails();
});

You can do a similar thing for functions also..... Hope it helps

score 0 · Answer 2 · answered Jul 09 '15 at 07:48

You misunderstood the concept service will have a single variable that is going to be shared by two controllers:- $scope is local for controller and cannot accessed by another controller:-

FOR Example:-

myApp.factory('Data', function () {

    var data = {
        home_main : ''
    };

    return {
        gethome_main : function () {
            return data.home_main ;
        },
        sethome_main : function (home_main ) {
            data.home_main  = home_main ;
        }
    };

myApp.controller('FirstCtrl', function ($scope, Data) {

    $scope.home_main= '';

    $scope.$watch('home_main', function (newValue, oldValue) {
        if (newValue !== oldValue) Data.sethome_main(newValue);
    });
});

myApp.controller('SecondCtrl', function ($scope, Data) {

    $scope.$watch(function () { return Data.gethome_main(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.home_main= newValue;
    });
});

Ok. how I will use these variable inside `view`? I have updated the question with HTML. — SK., Jul 09 '15 at 07:51
You have $scope.home_main in both the controllers.You cas use it simple like
. — squiroid, Jul 09 '15 at 07:52

AngularJS call a function from another controller

2 Answers2