calling method from one controller to another controller in angular js

Question

I want to call a method from one controller to another controller. There are two controllers named "header" and "mainContent". Need to call a "trigger method" in the "header Controller", After the success call of "result method" in the mainController.
If that method called that should hide that paragraph.

<div ng-controller="header">
  <p ng-show="msg">Content</p>
</div>
<div ng-controller="mainContent">
</div>


var module = angular.module("sourceViewer", ['ui.router']);
//header controller
module.controller('header', function ($scope, $location) {
      $scope.msg=true;
       $scope.trigger= function(data) { //This method should be called after the result method called in the mainContent Controller
            $scope.$on('UPDATE_CHILD', function() {
             if(data)
             $scope.msg=false;
            });

       }

});

// mainContent controller
module.controller('mainContent', function ($scope, $location, dataService) {

    $scope.user = dataService.user;
    $scope.signIn = function (user) {

        var result = dataService.login(user);
        result.success(function (data) {
            if (data.message== "success") {
                $scope.$broadcast('UPDATE_CHILD');
             //From here I want to call trigger method of header controller
            } 
        })
    };



});

why u don`t want to use $emit/$broadcast with $rootScope?

k.makarov
– k.makarov

2015-01-20 10:57:01 +00:00
Commented Jan 20, 2015 at 10:57 — k.makarov
– k.makarov, Commented Jan 20, 2015 at 10:57
@k.makarov I tried that one also but it didn't work for me.

Praveen M P
– Praveen M P

2015-01-20 10:59:17 +00:00
Commented Jan 20, 2015 at 10:59 — Praveen M P
– Praveen M P, Commented Jan 20, 2015 at 10:59

k.makarov · Accepted Answer · 2015-01-20 11:49:28Z

3

did u try this?

module.controller('header', ['$scope', '$location', '$rootScope', function ($scope, $location, $rootScope) {
              $scope.msg=true;
               $scope.trigger= function(data) { 
                  if(data)
                  $scope.msg=false;
               };

               $rootScope.$on('event:fire', $scope.trigger);

        }]);

        // mainContent controller
        module.controller('mainContent', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {

            $scope.user = dataService.user;
            $scope.signIn = function (user) {

                var result = dataService.login(user);
                result.success(function (data) {
                    if (data.message== "success") {
                      $rootScope.$broadcast('event:fire');
                    } 
                })
            };
    }]);

edited Jan 20, 2015 at 11:49

answered Jan 20, 2015 at 11:10

k.makarov

8641 gold badge12 silver badges30 bronze badges

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

1 Comment

Praveen M P Over a year ago

Thanks @k.makarov it worked.. there is a spelling mistake in the $rootScope.$on('evet:fire', $scope.trigger); can you please change that

Kwaky · Accepted Answer · 2015-01-20 11:03:48Z

0

You can use $rootScope like:

<div ng-controller="header">
    <p ng-show="$root.header.msg">Content</p>
</div>
<div ng-controller="mainContent">
</div>

var module = angular.module("sourceViewer", ['ui.router']);
//header controller
module.controller('header', function ($rootScope,$scope, $location) {
  $rootScope.header.msg = true;
});

// mainContent controller
module.controller('mainContent', function ($rootScope,$scope, $location, dataService) {

$scope.user = dataService.user;
$scope.signIn = function (user) {

    var result = dataService.login(user);
    result.success(function (data) {
        if (data.message== "success") {
         $rootScope.header.msg = true;
        } 
    })
};
});

answered Jan 20, 2015 at 11:03

Kwaky

612 bronze badges

2 Comments

Praveen M P Over a year ago

Thanks @kwaky.....I tried your code but it's giving a console error like: TypeError: Cannot set property 'msg' of undefined

Kwaky Over a year ago

try to add in top of your controller 'mainContent' this: ` $rootScope.header.msg = false; `

chandings · Accepted Answer · 2015-01-20 12:07:14Z

in the follwoing code you can see headerController is calling alert in mainController

myApp = angular.module("myApp",[]);

myApp.service("myService", function(){
    showAlertBool = false;
    return {
        showAlert: function (value) {
               showAlertBool = value;
        },

        canShowAlert: function () {
            return showAlertBool;
        }
    }
});

myApp.controller("headerController", function($scope, myService){
    console.log(myService);
    $scope.clickHandler = function(){
        myService.showAlert(true);
    }
});

myApp.controller("mainController", function($scope, myService){
    console.log(myService);
    $scope.getServiceValue = function(){
        return myService.canShowAlert();
    }

    $scope.$watch("getServiceValue()", function(newValue, oldValue){
        if(newValue === true && newValue !== oldValue){
            myService.showAlert(false);
            alert("I can show Alert now!!!");
        }
    });
});

For a working code you can go here

Collectives™ on Stack Overflow

calling method from one controller to another controller in angular js

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related