Monday, 6 June 2016

How to call the method which is present inside a another controller IN Angular JS

In this post we are going to see how to call the method which is present inside a another controller, In that it is separate in to two ways downwards and upwards from the controller.$broadcast a method means we are calling a method downwards from the mention scope, if the corresponding method is found then the method present in any controller can be executed, we can pass the data also in broadcast.


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

locapp.controller('parentController'function ($scope, $rootScope) {
    var i = 0;
    $scope.getData = function () {
        i++;
        $scope.$broadcast('getEmployees', ['Name ' + i, 'ABCDG' + i]);
    };

    $scope.getStudent = function () {
        $rootScope.$broadcast('getStudents', ['Rajesh''Suresh']);
    }


});


HTML:
********

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <title></title>
</head>
<body data-ng-app="locapp">

    <div ng-controller="parentController" class="well">
        <div class="btn btn-info" ng-click="getData()">Call Child Controller Method</div>
        <div class="btn btn-info" ng-click="getStudent()">Call Sibling Controller                                Method</div>
        <div ng-controller="childController">
            <ul>
                <li class="well-sm" ng-repeat="emp in employees">{{emp}}</li>
            </ul>
        </div>
    </div>

    <div ng-controller="siblingController">
        <ul class="panel">
            <li class="well-sm" ng-repeat="stud in students">{{stud}}</li>
        </ul>
    </div>

<script type="application/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<script type="application/javascript" src="js/angular.js"></script>
<script type="application/javascript" src="ang/issue.js"></script>

</body>
</html>



1.  $broadcast a method from parent controller to the child controller using scope.

Why normally we are using the scope in this broadcast, because we are going to call a controller which present as child controller for current controller. so we are setting the place from where to broadcast and which is the shortest one to reach soon., even we can broadcast from the rootScope also. it will broadcast the data.


locapp.controller('childController'function ($scope, $rootScope) {
    $scope.employees = [];

    $scope.$on('getEmployees'function (evt, data) {
        angular.forEach(data, function (item) {
            $scope.employees.push(item)
        });
    });

});


Now the childController is present inside the parentController, so we are broadcast a method getEmployees from the Parent controller along with data from the method getData in parentController. In childController we are having the getEmployees method in $on, the call back have a first argument which is event, second argument is a data supplied from the $broadcast.Here we are using the $scope to $broadcast because the method is present inside a child controller or inside the same scope there is another scope.

Output:



2. $broadcast a method from controller to sibling controller or any controller using the $rootScope.

Normally if we want a method to call from another controller which is not present inside our controller, may be present as sibling or present in some where hierarchy, To call a method which is present somewhere else, then we can broadcast a method from the rootScope



locapp.controller('siblingController'function ($scope, $rootScope) {

    $scope.students = [];

    $scope.$on('getStudents'function (evt, data) {
        angular.forEach(data, function (item) {
            $scope.students.push(item);
        })
    })

});


Here we are broadcast a method from the $rootScope because the controller is somewhere else.

Output:






From the above post you can learn how to broadcast the method from another controller.



No comments:

Post a Comment